Box Model trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Box Model trong CSS

Mọi phần tử HTML đều có thể được coi là boxes (hộp). Trong CSS, thuật ngữ “box model” được sử dụng khi nói về thiết kế và bố cục.

CSS box model hiểu nôm na là hộp bao quanh mỗi phần tử HTML. Nó bao gồm margin, đường viền, padding và nội dung phần tử. Hình ảnh dưới đây cho bạn cái nhìn cụ thể hơn về box model:

Giải thích từng thành phần:

  • Content: nội dung trong hộp, chứa văn bản hoặc hình ảnh
  • Padding: khoảng không gian bao quanh nội dung, có dạng transparent
  • Border: đường viền xung quanh padding và content
  • Margin: khoảng không gian bao quanh đường viền, có dạng transparent

Box model cho phép bạn thêm một đường viền bao quanh các phần tử để xác định khoảng không gian giữa các phần từ đó.

 

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Thuộc tính width và height của phần tử

Để thiết lập chiều rộng và chiều cao của một phần tử hiển thị chính xác trên mọi trình duyệt, bạn cần hiểu box model hoạt động như thế nào.

Chú ý: khi thiết lập thuộc tính width và height cho một phần tử với CSS, bạn phải đặt chiều rộng và chiều cao của vùng nội dung. Để tính toán đầy đủ kích thước của phần tử, bạn phải thêm padding, đường viền và margin.

Giả sử bạn muốn định dạng một phần tử <div> có tổng chiều rộng là 350px:

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Đây là cách tính toán:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Tổng chiều rộng của phần tử được tính toán như sau:

Tổng chiều rộng = chiều rộng + padding trái + padding phải + border trái + border phải + margin trái + margin phải

Tổng chiều cao của phần tử được tính toán như sau:

Tổng chiều cao = chiều cao + padding trên + padding dưới + border trên + border dưới + margin trên + margin dưới

Lưu ý cho phiên bản IE cũ: phiên bản IE8 trở về trước, bao gồm cả padding và border trong thuộc tính width. Để khắc phục vấn đề này, bạn thêm <!DOCTYPE html> vào trang HTML.