Mô Hình Hộp (Box Model) Trong CSS - Web Cơ Bản

Trang chủ » Trong Css để Thiết Lập Vùng đệm Cho Mô Hình Hộp Ta Dùng Thuộc Tính » Mô Hình Hộp (Box Model) Trong CSS - Web Cơ Bản

Có thể bạn quan tâm

Mô hình hộp (Box Model) trong CSS

Mô hình hộp (Box model)

Một phần tử HTML được coi là một Box.

Mô hình hộp (Box model) có nghĩa là một phần tử HTML sẽ bao gồm các thành phần: margin, border, padding, và content (nội dung của phần tử).

Mô hình hộp (Box model) cho phép chúng ta thêm bo viền xung quanh phần tử , và xác định khoảng cách giữa các phần tử.

Hình ảnh dưới đây minh họa cho mô hình hộp (Box model)

Margin Border Padding Content (nội dung của phần tử)

Giải thích các thành phần trên:

  • Margin - là phần nằm bên ngoài của border. Margin trong suốt.
  • Border - là đường viền bao xung quanh của padding và content.
  • Padding - là phần bao xung quanh content (nội dung của phần tử), nằm giữa padding và content.
  • Content - là nội dung thực tế của phần tử
Ví dụ: div { border:1px solid black; padding:30px; margin: 20px; } Xem ví dụ

Width và Height của một phần tử HTML

Để thiết lập chính xác width và height của một phần tử hiển thị đúng trên tất cả trình duyệt, trước hết bạn cần hiểu rõ về mô hình hộp (Box model).

Quạn trọng: Khi bạn thiết lập thuộc tính width và height của các phần tử bằng CSS, bạn cần thiết lập width và height của phần nội dung. Để tính toàn kích thước đầy đủ của phần tử, bạn cần phải tính thêm cả padding, border và margin.

Dưới đây là công thức tính tổng Width (Height) của một phần tử HTML:

  • Tổng width = width + left margin + right margin + left border + right border + left padding + right padding;
  • Tổng height = height + top margin + bottom margin + top border + bottom border + top padding + bottom padding;
Ví dụ: div { width:300px; height:300px; padding: 50px; border:10px solid black; } Xem ví dụ Tại sao việc xác định chính xác tổng width (height) lại quan trọng ?

Từ khóa » Trong Css để Thiết Lập Vùng đệm Cho Mô Hình Hộp Ta Dùng Thuộc Tính