Bài 10: Mô Hình Hộp (Box Model) Trong CSS | Tìm ở đây

Mô hình hộp trong CSS

Tất cả các phần tử HTML có thể được coi là các hộp (box). Trong CSS, thuật ngữ “mô hình hộp” (hay box model) được sử dụng khi nói về thiết kế bố cục website (layout).

Mô hình hộp trong CSS về cơ bản là một hình hộp bao quanh phần tử HTML, bao gồm: lề (margin), viền (border), phần đệm (padding) và nội dung (content). Hình ảnh dưới đây minh họa mô hình hộp:

Giải thích:

• Content – Nội dung của hộp, nơi văn bản và hình ảnh hiển thị
• Padding – Phần đệm, xác định khoảng không gian giữa nội dung hiển thị của một phần tử với đường viền của nó
• Border – Đường viền bao quanh phần đệm và nội dung
• Margin – khoảng cách từ phần tử được chọn ra phía bên ngoài của thành phần đó.

Mô hình hộp cho phép chúng ta thêm 1 đường viền bao xung quanh các phần tử và xác định không gian giữa các phần tử.

Ví dụ 1

div { background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }

Chiều rộng và chiều cao của một phần tử

Để thiết lập chính xác chiều rộng và chiều cao của một phần tử trong tất cả các trình duyệt, bạn cần biết mô hình hộp hoạt động như thế nào.

Quan trọng: Khi bạn đặt thuộc tính chiều rộng và chiều cao của một phần tử bằng CSS, bạn chỉ cần đặt chiều rộng và chiều cao của vùng nội dung. Để tính kích thước đầy đủ của một phần tử, bạn phải cộng thêm phần đệm, đường viền và lề.

Ví dụ 2

Đây là phần tử  <div> có tổng độ rộng là 350px:

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

Đây là phần tính toán:

320px (độ rộng thẻ div) + 20px (trái + phải của phần đệm) + 10px (trái + phải của viền) + 0px (trái + phải của lề) = 350px

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

Tổng chiều rộng (width) của phần tử = chiều rộng (width) + đệm trái (left padding) + đệm phải (right padding) + viền trái (left border )+ viền phải (right border) + lề trái (left margin) + lề phải (right margin)

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

Tổng chiều cao (height) phần tử = chiều cao (height) + phần đệm trên cùng (top padding) + phần đệm dưới (bottom padding) + viền trên (top border) + viền dưới (bottom border) + lề trên (top margin) + lề dưới (bottom margin)