Hôm nay Green House xin hướng dẫn các bạn 2 thuộc tính cơ bản trong CSS khi lập trình website, đây là 2 thuộc tính được sử dụng nhiều nhất và phổ biến nhất, vì nó sẽ tăng độ hợp lý, đẹp đẽ trong website, đó chính là Padding và Margin. Vậy Padding là gì? Margin là gì? Cách sử dụng padding và margin trong css là gì?
Padding và Margin là hai thuộc tính được sử dụng thường xuyên trong code CSS. Tuy nhiên vẫn còn khá nhiều bạn chưa hiểu rõ và còn nhầm lẫn giữa hai thuộc tính này, vì chúng đều được sử dụng để điều chỉnh không gian giữa các phần tử. Tuy nhiên bài viết này mình sẽ đề cập sau hơn về 2 thuộc tính này.
Các bạn hãy xem hình vẽ sau và mình sẽ giải thích ở dưới
Mục lục bài viết
Box Model
Trên trang HTML, các phần tử của trang điều được biểu diễn bởi hình hộp chữ nhật. vì thế thuật ngữ box model được dùng để ám chỉ các phần tử của trang. Nhìn trên hình bạn sẽ thấy có 3 box model là 3 hình chữ nhật
Padding là gì?
Padding hiểu 1 cách đơn giản thì thuộc tính là khoảng trống nằm giữa nội dung và viền. Chúng ta sẽ có 4 khoảng cách giữa nội dung với viền và bên trái, bên phải, phía trên và phía dưới tương ứng là padding-top, padding-left, padding-right và padding-bottom. Chúng ta có thể hiểu đơn giản hơn, là padding chính là khoảng cách giữa thẻ mẹ so với thẻ con.
Cách sử dụng padding trong css:
p { padding: 2px 2px 2px 2px; }
hoặc
p { padding-left: 2px; padding-right: 2px ; padding-top: 2px; padding-bottom: 2px}
Margin là gì?
Margin cũng là khoảng cách, nhưng không phải là khoảng cách giữa thẻ mẹ so với thẻ con, mà là khoảng cách giữa các phần tử con với nhau, và khoảng cách giữa phần tử cùng với viền. Khoảng cách này cũng có 4 thuộc tính là trái phải, trên dưới tương ứng là margin-left, margin-right, margin-top, margin-bottom.
Cách sử dụng margin trong css:
p { margin: 2px 2px 2px 2px; }
hoặc
p { margin-left: 2px; margin-right: 2px ; margin-top: 2px; margin-bottom: 2px}
Hy vọng qua bài viết này, các bạn sẽ hiểu rõ hơn Margin và Padding và cách dùng chúng trong CSS để làm đẹp trang web của các bạn nhé.
