Bài 7: Box Model – Margin, Padding, Border, Width

Khi bạn tạo một trang web, mỗi phần tử HTML (heading, paragraph, button…) đều được xem như một “hộp”. Box Model là một trong những khái niệm quan trọng nhất của CSS — nó định nghĩa cấu trúc của hộp đó.

Bài này sẽ dạy bạn cách các lớp margin, border, padding, và content hoạt động, giúp bạn hiểu và kiểm soát khoảng cách, viền, và kích thước các phần tử trên trang web.

Box Model là gì?

Box Model là cách CSS tính toán kích thước và khoảng cách của một phần tử. Mỗi phần tử HTML được cấu tạo từ 4 lớp từ trong ra ngoài:

• 📦 Content (Nội dung) — Phần chữ, hình ảnh
• 🔹 Padding (Đệm trong) — Khoảng cách giữa nội dung và viền
• 🔸 Border (Viền) — Đường viền xung quanh padding
• ⬜ Margin (Lề ngoài) — Khoảng cách giữa phần tử này và phần tử khác

┌─────────────────────────────────────────┐
│         MARGIN (Lề ngoài)               │
│  ┌───────────────────────────────────┐  │
│  │    BORDER (Viền)                  │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │   PADDING (Đệm trong)       │  │  │
│  │  │  ┌─────────────────────────┐│  │  │
│  │  │  │  CONTENT (Nội dung)    ││  │  │
│  │  │  │  Chữ, hình, dữ liệu   ││  │  │
│  │  │  └─────────────────────────┘│  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Content (Nội dung) – width và height

Content là phần chứa chữ, hình ảnh, hoặc nội dung thực của phần tử. Kích thước của nó được xác định bằng width (chiều rộng) và height (chiều cao).

.box {
  width: 300px;    /* Chiều rộng 300 pixel */
  height: 200px;   /* Chiều cao 200 pixel */
  background-color: lightblue;
}

<div class="box">Nội dung của hộp</div>

Các đơn vị width/height phổ biến

/* ✅ Cố định */
.fixed {
  width: 300px;
  height: 200px;
}

/* ✅ Responsive (tự điều chỉnh theo cha) */
.responsive {
  width: 100%;   /* 100% chiều rộng của cha */
  height: auto;  /* Tự động theo nội dung */
}

/* ✅ Tương đối */
.relative {
  width: 50%;    /* Nửa chiều rộng cha */
  height: 10rem; /* 10 lần font-size của root */
}

Padding (Đệm trong) – Khoảng cách bên trong

Padding là khoảng cách giữa nội dung và viền. Nó tạo không gian trống bên trong hộp, giúp nội dung không sát viền.

.box {
  width: 300px;
  background-color: lightblue;
  
  /* Padding 20px cho tất cả 4 phía */
  padding: 20px;
}

Các cách viết padding

/* 1. Padding cả 4 phía như nhau */
.box1 {
  padding: 20px;
  /* Tương đương: top=20px, right=20px, bottom=20px, left=20px */
}

/* 2. Padding top/bottom và left/right khác nhau */
.box2 {
  padding: 20px 30px;
  /* Tương đương: top/bottom=20px, left/right=30px */
}

/* 3. Padding từng phía (top, right, bottom, left) */
.box3 {
  padding: 10px 20px 30px 40px;
  /* top=10px, right=20px, bottom=30px, left=40px */
}

/* 4. Padding từng phía cụ thể */
.box4 {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Border (Viền) – Đường bao quanh

Border là đường viền xung quanh padding. Nó có 3 thành phần: width (độ dày), style (kiểu), và color (màu).

.box {
  /* Border đầy đủ: độ dày | kiểu | màu */
  border: 2px solid red;
  
  /* Tương đương */
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Các kiểu border (border-style)

/* Border từng phía */
.box {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 4px dotted green;
  border-left: 5px double purple;
}

/* Border radius (góc bo tròn) */
.box {
  border: 1px solid black;
  border-radius: 8px;    /* Tất cả 4 góc bo tròn 8px */
}

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;    /* Hình tròn */
}

/* Box shadow (bóng) */
.box {
  border: 1px solid gray;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Margin (Lề ngoài) – Khoảng cách bên ngoài

Margin là khoảng cách giữa viền của phần tử này và phần tử khác. Nó tạo không gian trống bên ngoài hộp.

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  
  /* Margin 30px cho tất cả 4 phía */
  margin: 30px;
}

Các cách viết margin (giống padding)

/* 1. Margin cả 4 phía */
.box1 {
  margin: 20px;
}

/* 2. Margin top/bottom và left/right */
.box2 {
  margin: 20px 40px;
  /* top/bottom=20px, left/right=40px */
}

/* 3. Margin từng phía */
.box3 {
  margin: 10px 20px 30px 40px;
  /* top, right, bottom, left */
}

/* 4. Margin từng phía cụ thể */
.box4 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* 5. Margin auto (canh giữa) */
.box5 {
  width: 300px;
  margin: 0 auto;  /* top/bottom=0, left/right=auto (canh giữa) */
}

Margin Collapse (Sự gộp margin)

Một hiện tượng đặc biệt của margin: khi hai phần tử dọc (<h1>, <p>…) có margin, không gian giữa chúng không phải là tổng của hai margin, mà là margin lớn nhất.

<!-- HTML -->
<h1>Tiêu đề</h1>
<p>Đoạn văn</p>

h1 {
  margin-bottom: 30px;
}

p {
  margin-top: 20px;
}

/* Khoảng cách giữa h1 và p là 30px (không phải 30+20=50px) */

Ví dụ hoàn chỉnh – Box Model trong thực tế

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>Hiểu rõ về Box Model</h1>

  <!-- Ví dụ 1: Card sản phẩm -->
  <div class="card">
    <h2>Sản phẩm 1</h2>
    <p>Đây là mô tả sản phẩm. Sản phẩm có chất lượng tốt và giá cả hợp lý.</p>
    <button class="btn">Mua ngay</button>
  </div>

  <!-- Ví dụ 2: Box với border -->
  <div class="box-border">
    <p>Hộp này có viền rõ ràng</p>
  </div>

  <!-- Ví dụ 3: Nút bấm -->
  <button class="btn-custom">Nút bấm tùy chỉnh</button>

</body>
</html>

/* FILE: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* Quan trọng! */
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
}

/* Card sản phẩm */
.card {
  width: 300px;
  background-color: white;
  
  /* Padding: khoảng cách giữa nội dung và viền */
  padding: 20px;
  
  /* Border: viền xung quanh */
  border: 1px solid #ddd;
  border-radius: 8px;
  
  /* Margin: khoảng cách với phần tử khác */
  margin: 20px auto;
  
  /* Box shadow: bóng */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card h2 {
  color: #3498db;
  margin-bottom: 15px;
}

.card p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Nút bấm */
.btn {
  width: 100%;
  padding: 12px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  
  /* Margin để tạo khoảng cách */
  margin-top: 10px;
}

.btn:hover {
  background-color: #2980b9;
}

/* Box có viền rõ */
.box-border {
  width: 400px;
  
  /* Content: nội dung có padding */
  padding: 30px;
  
  /* Border: viền dashes */
  border: 3px dashed #e74c3c;
  border-radius: 10px;
  
  /* Margin: cách từ lề */
  margin: 30px auto;
  
  background-color: #ffe6e6;
}

.box-border p {
  color: #c0392b;
  font-weight: bold;
  text-align: center;
}

/* Nút tùy chỉnh */
.btn-custom {
  display: block;
  margin: 30px auto;
  
  padding: 15px 40px;
  background-color: #27ae60;
  color: white;
  border: 2px solid #229954;
  border-radius: 25px;
  
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  
  transition: all 0.3s ease;
}

.btn-custom:hover {
  background-color: #229954;
  transform: scale(1.05);
}

box-sizing – Cách tính kích thước quan trọng

Có hai cách tính kích thước của phần tử:

/* ❌ KHÓ: Phải tính toán phức tạp */
.box1 {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  /* Thực tế width = 300 + 20*2 + 1*2 = 342px */
}

/* ✅ DỄ: border-box tính chính xác */
.box2 {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  /* Thực tế width = chính xác 300px */
}

/* ✅ BEST PRACTICE: Áp dụng cho tất cả phần tử */
* {
  box-sizing: border-box;
}

Tóm tắt

• ✅ Box Model: Content → Padding → Border → Margin
• ✅ Content: Nội dung, kích thước định bởi width/height
• ✅ Padding: Khoảng cách bên trong (giữa content và border)
• ✅ Border: Viền xung quanh padding (width, style, color)
• ✅ Margin: Khoảng cách bên ngoài (giữa phần tử này và phần tử khác)
• ✅ Margin collapse: Khoảng cách giữa hai phần tử là margin lớn nhất, không phải tổng
• ✅ border-radius: Làm góc bo tròn
• ✅ box-sizing: border-box: Luôn dùng để tính kích thước chính xác

🎯 Bài tập thực hành

Bài tập 1: Tạo ba hộp (boxes) với các thông số khác nhau:

• Hộp 1: width 200px, padding 15px, border 2px solid, margin 20px
• Hộp 2: width 250px, padding 20px, border 3px dashed, margin 30px, border-radius 10px
• Hộp 3: width 300px, padding 25px, border 1px dotted, margin 40px, border-radius 50%
• Tô màu nền khác nhau cho mỗi hộp
• Dùng box-sizing: border-box;

Bài tập 2: Tạo thẻ bài viết (post card)” với:

• width 350px, background màu trắng
• padding 20px (nội dung không sát viền)
• border 1px solid #ddd
• border-radius 8px
• margin 20px auto
• box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)
• Chứa h2 (margin-bottom 15px), p (margin-bottom 20px), button (width 100%, padding 10px)

Bài tập 3: Tạo layout hai cột với Box Model:

• Cột trái: width 60%, padding 20px, border, background #f9f9f9
• Cột phải: width 40%, padding 20px, border, background #e8e8e8
• Margin giữa hai cột: 20px
• Áp dụng box-sizing: border-box; để tính width chính xác
• Responsive: trên điện thoại, hai cột chồng nhau (width 100%)

Chúc bạn thành công! 🚀