Bài 7. Mô hình hộp: margin, padding, border, kích thước

Một số khái niệm

Mặc định (box-sizing: content-box), width: 300px chỉ là chiều rộng nội dung; thêm padding 20px và border 5px, hộp thật rộng 300 + 2×20 + 2×5 = 350px. Hầu hết dự án hiện đại đặt border-box cho mọi phần tử để width là chiều rộng thật, dễ tính bố cục.

*, *::before, *::after { box-sizing: border-box; }

Bốn lớp của hộp

<style>
  .hop { width: 260px; padding: 20px; border: 6px solid #2e7d32; margin: 20px; background: #e8f5e9; }
  .b2 { box-sizing: border-box; }
  body { background: repeating-linear-gradient(45deg,#fff 0 6px,#fff3e0 6px 12px); }
</style>
<div class="hop">content-box: rộng thật 260 + 40 + 12 = 312px</div>
<div class="hop b2">border-box: rộng thật đúng 260px</div>

Nền sọc cam là vùng margin (trong suốt). Mở DevTools → Computed để xem sơ đồ hộp với số đo từng lớp.

Margin, padding viết tắt và căn giữa

.a { margin: 10px; }               /* 4 phía */
.b { margin: 10px 20px; }          /* trên-dưới 10, trái-phải 20 */
.c { margin: 10px 20px 30px; }     /* trên 10, trái-phải 20, dưới 30 */
.d { margin: 5px 10px 15px 20px; } /* trên, phải, dưới, trái (chiều kim đồng hồ) */
.giua { width: 600px; margin: 0 auto; }  /* căn giữa khối theo chiều ngang */
.logic { margin-block: 16px; padding-inline: 24px; } /* thuộc tính logic: dọc / ngang */

<style>
  .a { background:#bbdefb; margin-bottom: 30px; } .b { background:#c8e6c9; margin-top: 20px; }
  .a, .b { padding: 8px; }
</style>
<div class="a">margin-bottom: 30px</div>
<div class="b">margin-top: 20px → khoảng cách chỉ 30px (gộp margin), không phải 50px</div>

Kích thước và tỉ lệ

<style>
  .anh { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; background: #90a4ae; border-radius: 12px; display: grid; place-items: center; color: #fff; }
  .doan { min-height: 60px; max-width: 400px; border: 1px dashed #999; padding: 8px; margin-top: 10px; }
</style>
<div class="anh">aspect-ratio 16/9</div>
<div class="doan">min-height giữ chiều cao tối thiểu dù nội dung ngắn</div>

Viền, bo góc và outline

<style>
  .v { display: inline-block; padding: 14px 18px; margin: 6px; background: #fff; }
  .v1 { border: 2px solid #1565c0; }
  .v2 { border: 3px dashed #e65100; border-radius: 12px; }
  .v3 { border-left: 6px solid #2e7d32; background: #f1f8e9; }
  .v4 { border-radius: 50%; width: 80px; height: 80px; background: #7b1fa2; color: #fff; display:inline-grid; place-items:center; padding:0; }
  .v5 { outline: 3px solid #ffb300; outline-offset: 4px; border: 1px solid #ccc; }
</style>
<span class="v v1">solid</span><span class="v v2">dashed, bo 12px</span><span class="v v3">viền trái</span><span class="v v4">tròn</span><span class="v v5">outline</span>

outline vẽ bên ngoài viền, không chiếm chỗ (không làm xô lệch bố cục), thường dùng cho trạng thái focus.