• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
No Result
View All Result
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
No Result
View All Result
No Result
View All Result

Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020

ATPMedia by ATPMedia
13/11/2019
Home Kiến thức CSS
Rate this post

thuộc tính margin và padding trong css là một trong những từ khóa được search nhiều nhất trên google về chủ đề thuộc tính margin và padding trong css. Trong bài viết này, xaydungweb.vn sẽ viết bài Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020

Thuộc Tính Margin Và Padding Trong Css

Hướng dẫn sử dụng thuộc tính margin và padding trong css mới nhất 2020

Padding và Margin là hai tính chất thường được sử dụng trong CSS. bên cạnh đó rất nhiều bạn vẫn không phân biệt được sự khác nhau giữa hai tính chất này. Để hiểu rõ được sự khác biệt thì bạn cần nắm vững được khái niệm cần thiết trong CSS là box model.

Box Model

Trên trang HTML, mỗi phần tử của trang được đại diện bởi một hình chữ nhật. Trong CSS các ảnh chữ nhật này được xem như một chiếc hộp và thuật ngữ box model được sử dụng để chỉ các hộp này:

CSS Box Model

CSS Padding

Padding (khoảng đệm) là thuộc tính được sử dụng để tạo khoảng trống tính từ đường viền của phần tử cho tới nội dung phần tử. gợi ý nếu bạn có một đoạn văn bản và phần tử tương ứng với đoạn văn bản là p, văn bản có click thức là 13px và khoảng đệm trên dưới là 2px và phải trái là 3px sử dụng luật CSS giống như sau:

p font-size: 13px;padding: 2px3px2px3px;

Lúc này thì tổng chiều cao của phần tử tính tới đường viền lúc này sẽ là 13px + 2px (trên) + 2px (dưới) = 17px.

hiển nhiên bạn cũng hoàn toàn đủ sức chỉ dùng khoảng đệm trên (padding-top) hoặc tương tự chỉ sử dụng khoảng đệm dưới (padding-bottom), khoảng đệm trái (padding-left) và khoảng đệm phải (padding-right):

p font-size: 13px;padding-top: 2px;padding-bottom: 2px;

tính chất height của CSS sử dụng để xác định chiều cao của phần tử gồm có cả khoảng đềm của phần tử (hay tính đến đường viền)

CSS Margin

Margin (lề) là tính chất được dùng để tạo khoảng trống tính từ đường viền của phần tử ra phía ngoài. luôn luôn sử dụng gợi ý trên nếu bạn tạo lề trên và lề dưới của phần tử là 2px và lề phải và lề trái là 3px luật CSS như sau:

p font-size: 13px;padding: 2px3px;margin: 2px3px;

Lúc này phần tử luôn luôn có chiều cao tổng cộng là 17px bên cạnh đó sẽ có thêm một khoảng trống là 2px với các phần tử phía trước nó, 3px với các phần tử phía dưới nó, 3px cho các phần tử bên trái và bên phải.

Nguồn: https://www.codehub.vn/

 

Tags: margin auto trong cssmargin cssmargin paddingmargin trong csspadding and margin csspadding cssposition trong cssthuộc tính margin và padding trong cssý nghĩa của margin và padding
ATPMedia

ATPMedia

Next Post
Array Push Trong Php

Hướng dẫn dùng array_push trong php mới nhất 2020

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

No Result
View All Result
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.