Nếu làm frontend được một thời gian, chắc hẳn bạn đã từng trải qua cảm giác này: Nhìn design thì đẹp lung linh, nhưng khi code ra thì có cái gì đó sai sai, không đúng với bản thiết kế. Rồi bạn bắt đầu chơi trò “đoán già đoán non” với margin và padding, thêm vào đây 10px, bớt đi kia 5px, và cuối cùng là một mớ CSS lộn xộn không ai hiểu nổi, kể cả chính bạn sau một tuần quay lại.

Đó là câu chuyện của mình cách đây vài năm. Giờ thì khác rồi (chắc vậy 😂), và hôm nay mình muốn chia sẻ một số kinh nghiệm về cách sử dụng margin và padding hiệu quả mà không làm rối tung mọi thứ lên.

Reset CSS - Bước đầu tiên và quan trọng nhất

Trước khi bắt đầu bất cứ dự án nào, mình luôn thêm đoạn reset CSS này vào đầu file:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Ba dòng đơn giản này giải quyết được rất nhiều vấn đề:

  1. Loại bỏ margin và padding mặc định của trình duyệt
  2. Đảm bảo tất cả các phần tử có kích thước như nhau trên mọi trình duyệt
  3. box-sizing: border-box giúp width và height bao gồm cả padding và border

Bạn không thể tưởng tượng được việc loại bỏ margin và padding mặc định quan trọng đến thế nào. Nó đảm bảo rằng mọi khoảng cách trong trang web của bạn đều là cố ý, chủ đích, và nhất quán.

Margin vs Padding - Biết khi nào dùng cái gì

Sau nhiều năm làm việc và vài nghìn lần nhầm lẫn, mình đã đúc kết được quy tắc đơn giản sau:

  • Padding: Khoảng cách bên trong phần tử, giữa nội dung và viền
  • Margin: Khoảng cách bên ngoài phần tử, giữa phần tử này và phần tử khác

Nghe có vẻ hiển nhiên, nhưng khi áp dụng vào thực tế, mình thường tuân theo các nguyên tắc sau:

  1. Dùng padding khi:

    • Tạo khoảng cách giữa nội dung và viền của chính phần tử đó
    • Muốn background color/image bao trùm cả khoảng trống
    • Làm việc với các phần tử có border hoặc background

  2. Dùng margin khi:

    • Tạo khoảng cách giữa các phần tử với nhau
    • Muốn khoảng trống không có background/border
    • Căn chỉnh vị trí của phần tử trong container

Một ví dụ thực tế: khi làm một card UI

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* Khoảng cách giữa card này và card tiếp theo */
  padding: 16px; /* Khoảng cách từ nội dung đến viền của card */
}

.card-title {
  margin-bottom: 12px; /* Khoảng cách giữa title và content */
  padding: 0; /* Không cần padding vì không có background/border */
}

Margin Collapse - Con quỷ ẩn náu trong CSS

Đây là thứ đã làm mình mất ngủ không biết bao nhiêu đêm. Margin collapse là hiện tượng khi hai margin (top và bottom) của các phần tử liền kề sẽ “sụp đổ” vào nhau, lấy giá trị lớn nhất trong hai margin đó.

Ví dụ:

<div style="margin-bottom: 20px"></div>
<div style="margin-top: 30px"></div>

Khoảng cách giữa hai div này không phải 50px (20px + 30px) mà là 30px (lấy max của hai giá trị).

Cách xử lý? Mình thường chọn một trong hai cách:

  1. Chỉ sử dụng một loại margin (hoặc top, hoặc bottom) cho tất cả các phần tử cùng loại

    p,
h1,
h2,
h3,
ul,
ol {
  margin-top: 0;
  margin-bottom: 16px;
}

  2. Sử dụng padding cho parent element thay vì margin cho children

    .content {
  padding: 20px 0;
}
.content > * {
  margin: 0;
}

Hệ thống spacing nhất quán

Một trong những bước tiến lớn nhất của mình là khi bắt đầu xây dựng hệ thống spacing nhất quán. Thay vì các giá trị ngẫu nhiên như 7px, 13px, 18px, mình sử dụng một scale có quy luật:

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.card-title {
  margin-bottom: var(--space-sm);
}

Điều này giúp mình:

  1. Duy trì tính nhất quán trong toàn bộ dự án
  2. Dễ dàng điều chỉnh spacing ở một nơi duy nhất
  3. Code dễ đọc và dễ hiểu hơn

Responsive spacing với CSS

Một vấn đề phổ biến khác là spacing trông ổn trên desktop nhưng quá lớn trên mobile. Giải pháp của mình là sử dụng các media query:

:root {
  --space-md: 12px;
  --space-lg: 20px;
}

@media (min-width: 768px) {
  :root {
    --space-md: 16px;
    --space-lg: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --space-md: 20px;
    --space-lg: 32px;
  }
}

Đơn giản mà hiệu quả phải không nào?

Những sai lầm thường gặp

Sau nhiều năm làm việc với CSS, mình đã chứng kiến (và mắc phải) rất nhiều sai lầm:

  1. Lạm dụng margin âm: Đôi khi chúng ta dùng margin âm để “sửa” layout, nhưng đây là dấu hiệu cho thấy có vấn đề với cấu trúc HTML/CSS của bạn.

  2. Magic numbers: Những giá trị random như margin-top: 37px thường là dấu hiệu của việc “đoán mò” thay vì thiết kế có hệ thống.

  3. Không nhất quán: Dùng margin-bottom: 20px ở chỗ này, margin-top: 20px ở chỗ khác sẽ dẫn đến margin collapse và khó debug.

  4. Quá nhiều nested selectors: Càng nhiều selector nested, CSS càng khó bảo trì. Hãy giữ độ sâu của selector ở mức tối thiểu.

Kết luận

Margin và padding có vẻ đơn giản, nhưng sử dụng chúng hiệu quả là cả một nghệ thuật. Với những nguyên tắc đơn giản như reset CSS, phân biệt rõ khi nào dùng margin/padding, xây dựng hệ thống spacing nhất quán, và hiểu về margin collapse, bạn có thể tạo ra các layout chính xác và dễ bảo trì.

Nếu bạn chỉ nhớ một điều từ bài viết này, hãy nhớ: Luôn reset margin và padding của trình duyệt trước khi bắt đầu một dự án mới. Điều này sẽ tiết kiệm cho bạn hàng giờ debug trong tương lai.

Bạn có mẹo hay trick nào về margin và padding mà bạn muốn chia sẻ không? Hãy để lại trong phần bình luận nhé!