Box Model trong CSS

Trong CSS, mọi phần tử HTML đều được trình duyệt hiển thị như một hộp chữ nhật. Hộp này được mô tả theo Box Model, bao gồm:

• content (nội dung),
• padding (đệm),
• border (viền),
• margin (khoảng lề).

Hiểu rõ cách các phần này hoạt động sẽ giúp bạn dễ dàng căn chỉnh bố cục, tạo khoảng cách hợp lý và thiết kế giao diện chính xác.

Tìm hiểu về Box Model

• Tất cả phần tử HTML đều có cấu trúc hộp (box).
• Box Model gồm: content, padding, border, margin.
• width và height chỉ định kích thước phần content, chưa phải kích thước thực tế.
• Kích thước thực tế = content + padding + border.
• Margin không làm tăng kích thước phần tử, chỉ tạo khoảng trống bên ngoài.

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid blue;
    margin: 15px;
    background: lightyellow;
  }
</style>

<div class="box">Nội dung bên trong</div>

Kích thước thực tế của box này = 200 (width) + 40 (padding 2 bên) + 10 (border 2 bên) = 250px.

Thuộc tính padding

Padding là khoảng cách từ nội dung (content) đến viền (border).

<style>
  .padding-box {
    background: lightblue;
    padding: 30px;
  }
</style>

<div class="padding-box">Nội dung có padding 30px</div>

Padding có thể viết chi tiết:

• padding-top: 10px;
• padding-right: 20px;
• padding-bottom: 30px;
• padding-left: 40px;

Viết tắt:

• padding: 20px; (cả 4 phía)
• padding: 10px 20px; (trên-dưới | trái-phải)

Padding làm tăng kích thước phần tử. Nếu muốn giữ nguyên kích thước khi thêm padding:

* {
  box-sizing: border-box;
}

Thuộc tính border

Border là đường viền bao quanh padding.

<style>
  .border-box {
    padding: 10px;
    border: 5px dashed red;
    background: #f8f8f8;
  }
</style>

<div class="border-box">Box có border đỏ</div>

Border có thể viết chi tiết:

• border-width: 5px;: độ dày đường viền
  • Là cú pháp viết tắt của (border-top-width, border-bottom-width, border-left-width, border-right-width)
• border-style: dashed;: kiểu dáng đường viền (solid, dotted, dashed, v.v)
• border-color: red;: màu sắc đường viền

Viết tắt:

• border: 5px dashed red;

Border tham gia làm tăng kích thước phần tử.

Tra cứu thuộc tính border-style: CSS border-style Property

Thuộc tính border-radius

Dùng để bo tròn các góc phần tử.

<style>
  .circle {
    width: 120px;
    height: 120px;
    background: orange;
    border-radius: 50%; /* thành hình tròn */
  }
</style>

<div class="circle"></div>

border-radius có thể viết chi tiết:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Viết tắt:

• border-radius: 10px;

Border-radius không nằm trong Box Model và không làm tăng kích thước phần tử.

Thuộc tính outline

Outline là đường viền bên ngoài border.

<style>
  .outline-box {
    padding: 15px;
    border: 2px solid black;
    outline: 4px solid green;
    outline-offset: 5px;
  }
</style>

<div class="outline-box">Box có outline</div>

• Không chiếm diện tích, không bo góc theo border-radius.
• outline-offset giúp tách outline ra xa border.

Thuộc tính margin

Margin là khoảng cách giữa phần tử và các phần tử xung quanh.

<style>
  .margin-box {
    width: 200px;
    height: 80px;
    background: pink;
    margin: 20px;
  }
</style>

<div class="margin-box">Box có margin 20px</div>

Margin có thể viết chi tiết:

• margin-top
• margin-bottom
• margin-left
• margin-right

Viết tắt:

• margin: 20px;

Margin là thành phần trong suốt, không thể nhìn thấy và không làm tăng kích thước phần tử.

Căn giữa với margin: auto

<style>
  .center-box {
    width: 200px;
    margin: auto;
    background: lightgreen;
    text-align: center;
  }
</style>

<div class="center-box">Căn giữa ngang</div>

Chỉ dùng auto để căn giữa được cho chiều ngang, không căn được cho chiều dọc.
margin: auto chỉ hoạt động với phần tử display: block có width xác định.

Margin âm

Dùng để chồng các phần tử lên nhau.

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
  }
  .red {
    background: tomato;
    margin-right: -50px;
  }
  .blue {
    background: lightblue;
  }
</style>

<div class="circle red"></div>
<div class="circle blue"></div>

Hình đỏ và xanh sẽ chồng lên nhau nhờ margin-right: -20px.

Vậy với giá trị dương, các phần tử sẽ đẩy nhau ra xa, với giá trị âm, các phần tử sẽ tiếp giáp nhau gần hơn và chồng lên nhau.

Margin Collapse

Khi 2 margin dọc gặp nhau (ví dụ 2 thẻ p liên tiếp), chỉ margin lớn hơn được áp dụng.

<style>
  p {
    margin: 30px 0;
  }
</style>

<p>Đoạn 1</p>
<p>Đoạn 2</p>

Khoảng cách giữa 2 đoạn là 30px, không phải 60px.

Thuộc tính box-sizing

Quy định cách tính kích thước phần tử:

<style>
  .content-box {
    width: 200px;
    padding: 20px;
    border: 5px solid red;
    box-sizing: content-box; /* mặc định */
  }

  .border-box {
    width: 200px;
    padding: 20px;
    border: 5px solid green;
    box-sizing: border-box;
  }
</style>

<div class="content-box">content-box</div>
<div class="border-box">border-box</div>

• content-box: tổng chiều rộng > 200px (do cộng thêm padding + border).
• border-box: tổng chiều rộng = 200px, padding + border tính gộp vào.

Giá trị border-box thường được sử dụng phổ biến hơn vì dễ kiểm soát kích thước và không phải tính toán nhiều.

Kết luận