CSS Box model

17/05/2019

Bài sau » « Bài trước

Tất cả phần tử HTML đều được coi như là một cái hộp (box). Trong CSS, thuật ngữ "box model" được dùng để nói về design và layout.

CSS Box model cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm margin, border, padding và content (nội dung của thẻ HTML). Xem hình minh họa bên dưới: 

CSS Box model

Trong hình trên có:

  • Content : Nội dung của box, bao gồm text và image.
  • padding: thuộc tính padding của thẻ HTML. Và padding thì trong suốt (transparent).
  • border: Đường viền bao quanh padding và content.
  • margin: Khoảng cách giữa các phần tử HTML. Và margin thì trong suốt (transparent).

Ví dụ: 

div { width: 300px; border: 15px solid black; padding: 50px; margin: 20px; background: powderblue; }

Kết quả hiển thị :

CSS Box model

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

Để thiết lập width và height của phần tử HTML hoạt động chính xác trên tất cả trình duyệt. Bạn phải biết cách mà Box model hoạt động như thế nào.

Quan trọng : Khi bạn thiết lập width và height cho phần tử HTML với CSS, tức là bạn chỉ thiết lập width và height của Content. Bạn phải tính toán full size của phần tử HTML bao gồm padding, border và margin.

Ví dụ, Ta muốn thiết lập thẻ div có độ rộng là 350px :

div { width: 320px; padding: 10px; border: 5px solid black; margin: 0; background: powderblue; }

Và đây là kết quả tính toán:
width 320px
+ 20px (left - right padding)
+ 10px (left - right border)
+ 0px (left - right margin)
= 350px

Thẻ div có động rộng 350px

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

Total width = width + left padding + right padding + left border + right border + left margin + right margin

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

Total height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Bài sau » « Bài trước
Back to top