Padding trong CSS: viết tắt, từng cạnh, phần trăm và ví dụ

Padding là gì

Padding là khoảng trống bên trong phần tử, giữa nội dung và viền của nó. Nó mang nền của phần tử, nên đây là thuộc tính giúp một nút, một thẻ hay một nhãn có chỗ để "thở".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

Vùng màu xanh dương là nội dung. Dải xanh lá bao quanh là 24px padding ở mọi cạnh, và viền nằm bên ngoài dải đó.

Viết tắt padding: 1, 2, 3 hoặc 4 giá trị

padding đặt cả bốn cạnh trong một khai báo. Số lượng giá trị quyết định cạnh nào nhận giá trị nào, đi theo chiều kim đồng hồ từ cạnh trên:

Hai giá trị nghĩa là "dọc, ngang". Ba giá trị nghĩa là "trên, ngang, dưới". Bốn giá trị đi vòng theo kim đồng hồ: trên, phải, dưới, trái (mẹo nhớ quen thuộc trong tiếng Anh là TRouBLe, ghép từ Top, Right, Bottom, Left).

Gõ bất kỳ cách viết tắt nào bên dưới. Hộp sẽ vẽ lại và trình duyệt báo mỗi cạnh nhận được bao nhiêu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Hãy thử 8px, 8px 24px, 0 0 40px và 1em 5%. Giá trị không hợp lệ, như -10px, bị bỏ qua và hộp giữ padding hợp lệ gần nhất.

Từng cạnh một

Mỗi cạnh có thuộc tính riêng, rõ ràng hơn cách viết tắt bốn giá trị khi bạn chỉ muốn đổi một cạnh:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Viết tắt rồi chỉnh một cạnh là cách làm phổ biến: đặt tất cả trước, sau đó điều chỉnh một cạnh.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Thứ tự ở đây rất quan trọng: một khai báo viết tắt padding đặt sau padding-bottom sẽ đưa cạnh dưới về lại 16px.

Padding logic: padding-inline và padding-block

padding-left và padding-right là thuộc tính vật lý: chúng giữ nguyên một phía trong mọi ngôn ngữ. Các thuộc tính logic thì đi theo hướng viết, và đó là điều bạn cần trên một trang cũng được hiển thị từ phải sang trái:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Padding làm hộp to ra (trừ khi dùng border-box)

Theo mặc định, width chỉ là chiều rộng của nội dung, và padding được cộng thêm vào. Một hộp width: 200px với padding: 20px sẽ rộng 240px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box giữ hộp ở 200px và lấy padding từ bên trong. Trang box model trình bày đầy đủ cách tính.

Padding phần trăm

Padding phần trăm được tính theo chiều rộng của phần tử cha, ở cả bốn cạnh, kể cả trên và dưới:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

Đó là nguồn gốc của mẹo "padding-top: 56.25%" ngày xưa để tạo khung video 16:9. Ngày nay aspect-ratio: 16 / 9 làm việc đó trực tiếp.

Padding cho nút và liên kết

Padding là cách đúng để làm liên kết hay nút lớn hơn, vì padding là một phần của phần tử, và do đó là một phần của vùng bạn bấm hoặc chạm vào. Margin thì thêm khoảng trống nhưng không làm vùng bấm lớn hơn.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Các giá trị padding nhận

Lỗi thường gặp

• Sai thứ tự trong cách viết tắt bốn giá trị. Thứ tự là trên, phải, dưới, trái, theo chiều kim đồng hồ.
• Hộp to ra khi thêm padding. Hãy đặt box-sizing: border-box.
• Dùng padding để tách hai phần tử. Khoảng cách giữa các phần tử là margin; padding là khoảng trống bên trong một phần tử. Xem margin và padding.
• Padding dọc trên liên kết inline đè lên các dòng khác. Hãy chuyển nó thành inline-block.
• Padding âm hoặc padding: auto. Cả hai đều không hợp lệ và bị bỏ qua mà không báo gì.