Categories CSS

Mô hình hộp trong CSS

Với CSS, các thẻ HTML được xem như chiếc hộp. Hộp này có nội dung, đệm (padding), đường viền (border) và lề (margin).

Sở dĩ bình thường bạn chẳng thấy cái hộp nào là bởi theo mặc định các giá trị trên được quy định là 0. Chỉ khi bạn gán một giá trị cụ thể cho nó, các đối tượng này mới hiện nguyên dạng.

Giả dụ như dòng chữ này, bạn sẽ không thấy gì cả.


Nhưng dòng này nó có đường viền, có đệm


Và dưới đây là hình ảnh mô phỏng cho mô hình hộp trong CSS:

mô hình hộp trong CSS

Một điều cần chú ý trong mô hình hộp đó là kích thước của hộp sẽ thay đổi khi bạn gán các giá trị cho thuộc tính lề, đệm và viền, cụ thể:

  • Chiều rộng hộp = chiều rộng  + padding trái + padding phải +  border trái + border phải + margin trái + margin phải;
  • Chiều cao hộp = chiều cao + padding trên + padding dưới +  border trên + border dưới + margin trên + margin dưới;

Ví dụ một div được mô tả như sau:

div {
width:200px;
height: 100px;
padding:10px;
border:5px solid red;
margin:20px;
}

Bạn đừng lầm tưởng div có chiều rộng là 200px và chiều cao là 100px, đấy thực tế chỉ là không gian của nội dung, còn không gian của cả div có kích thước lớn hơn, cụ thể:

  • chiều rộng = 200 + 10*2 + 5*2 + 20*2 = 270px;
  • chiều cao = 100 + 10*2 + 5*2 + 20*2 = 170px;

Vấn đề nhầm lẫn kích thước rất hay xảy ra với padding, vì bạn nghĩ khi thêm padding kích thước sẽ không tăng lên.

Ý thức được kích thước sẽ giúp bạn tránh trường hợp các thẻ chèn, xô đẩy nhau trong layout.

Back to Top