CSS Margin và Padding: Hiểu rõ Box Model

Giới thiệu

Hiểu rõ Margin (lề ngoài) và Padding (đệm bên trong) là nền tảng của CSS Box Model. Margin tạo khoảng cách giữa các element, Padding tạo khoảng cách giữa nội dung và viền (border) của element.

Minh họa trực quan Box Model

┌─────────────────────────────────────┐
│           MARGIN (Lề ngoài)         │  ← Khoảng cách với element khác
│  ┌───────────────────────────────┐  │
│  │      BORDER (Viền)            │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   PADDING (Đệm trong)   │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │   CONTENT         │  │  │  │
│  │  │  │   (Nội dung)      │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Ví dụ hoàn chỉnh - So sánh Margin vs Padding

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Margin vs Padding</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; padding: 40px 20px; background: #f5f5f5; }
    .demo { max-width: 600px; margin: 0 auto; }
    .box {
      background: #fff;
      border: 2px solid #333;
      margin-bottom: 30px;
      padding: 20px;
    }
    .outer { border-color: #667eea; background: #f0f4ff; }
    .inner { border-color: #4caf50; background: #e8f5e9; margin: 20px; padding-left: 20px; }
    .labels { display: flex; gap: 20px; margin-bottom: 20px; font-size: 13px; color: #666; }
    .labels span { display: flex; align-items: center; gap: 6px; }
    .labels i { width: 12px; height: 12px; border-radius: 2px; }
    .margin-color { background: #667eea; }
    .padding-color { background: #4caf50; }
    .border-color { background: #333; }
    .content-color { background: #fff; border: 1px dashed #ccc; }
  </style>
</head>
<body>
  <div class="demo">
    <h1 style="text-align:center; margin-bottom:8px">CSS Box Model: Margin vs Padding</h1>
    <p style="text-align:center; color:#666; margin-bottom:30px">Outer div (margin) → Border → Inner div (padding-left)</p>
    <div class="labels">
      <span><i class="margin-color"></i> Margin (Lề ngoài)</span>
      <span><i class="border-color"></i> Border (Viền)</span>
      <span><i class="padding-color"></i> Padding (Đệm)</span>
      <span><i class="content-color"></i> Content (Nội dung)</span>
    </div>
    <div class="outer">
      Outer Div (margin-bottom: 30px)
      <div class="inner">
        Inner Div (margin: 20px; padding-left: 20px)
        <br>Nội dung được đẩy vào 20px từ viền trái.
      </div>
    </div>
  </div>
</body>
</html>

Cú pháp tắt (Shorthand)

Padding dùng cú pháp y hệt.

Margin Collapse (Gộp margin) - Quan trọng!

Margin dọc (top/bottom) của 2 element liền kề sẽ gộp lại, lấy giá trị lớn hơn:

.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
/* Khoảng cách thực tế = 30px (không phải 50px) */

Giải pháp: Dùng padding thay margin, hoặc thêm border/overflow hidden trên cha, hoặc flex/grid gap.

Margin Auto - Căn giữa Block Element

.centered { width: 500px; margin: 0 auto; } /* Căn giữa ngang */

Chỉ hoạt động trên block element có width xác định.

Negative Margin - Kỹ thuật nâng cao

• Kéo element ra ngoài container: margin: -20px.
• Overlapping elements, pull-out quotes, full-width banner trong container giới hạn.
• Cẩn thận: Có thể gây overlap không mong muốn.

Padding & Box-sizing

Mặc định box-sizing: content-box → width/height chỉ tính content, padding/border cộng thêm ra ngoài.

Khuyên dùng: * { box-sizing: border-box; } → width/height bao gồm padding + border. Dễ tính toán layout hơn.