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 chữ này bạn sẽ thấy nó có đường viền, có đệm và có cả lề nữa

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.
Mình là Nguyễn Đức Anh, sinh năm 1987. Hiện là marketing tự do. Facebook cá nhân: https://www.facebook.com/anhducnguyen87

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *