Cách sử dụng thuộc tính CSS Padding

Tìm hiểu cách sử dụng thuộc tính padding trong CSS.

Thuộc tính CSS padding được dùng để kiểm soát lượng khoảng trắng bên trong các phần tử HTML, giữa nội dung (content) và viền (border).

padding thường bị nhầm lẫn với thuộc tính CSS margin, thuộc tính này thêm khoảng trắng bên ngoài viền của phần tử (ngược lại với padding).

Cơ bản về CSS Padding

Dưới đây là một phần tử button với nhãn text (nội dung của nó):

<button>Button</button>

Hãy đặt giá trị padding cho nút là 24px:

button { padding: 24px; }

Kết quả:

Nếu bạn thay đổi giá trị padding thành 0, bạn sẽ nhận được:

Có năm thuộc tính padding khác nhau trong CSS:

padding-top
padding-right
padding-bottom
padding-left
padding (thuộc tính chúng ta vừa dùng)

Bốn thuộc tính padding đầu tiên (-top, -right, -bottom, -left) là các thuộc tính đơn lẻ, theo một chiều, chỉ có thể thêm padding cho một phía.

Thuộc tính cuối cùng, padding, là một thuộc tính rút gọn (shorthand), và là thuộc tính linh hoạt và được dùng nhiều nhất trong năm thuộc tính padding.

Hãy khám phá sâu hơn về thuộc tính padding.

Cách sử dụng Padding Shorthand

Thuộc tính rút gọn padding (thứ duy nhất chúng ta đã dùng cho đến nay) có thể thêm nhiều giá trị padding cùng lúc (một, hai, ba hoặc bốn giá trị).

Hãy xem một số ví dụ.

Padding shorthand một giá trị

Trong ví dụ nút có padding 24px trước đó, bạn có thể viết trong CSS như sau:

button { padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; }

Nhưng đó là lãng phí thời gian khi bạn có thể nhắm đến cả bốn phía cùng lúc bằng padding shorthand một giá trị:

button { padding: 24px; }

Padding shorthand hai giá trị

Điều gì xảy ra nếu bạn chỉ muốn thêm padding 16px cho trên và dưới, nhưng 24px cho trái và phải?

Bạn có thể làm như sau (cách tốn thời gian):

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

Hoặc dùng "người bạn tốt" của bạn, padding shorthand hai giá trị:

button { padding: 16px 24px; }

Khi bạn dùng thuộc tính padding với hai giá trị như trên:

Giá trị đầu tiên nhắm đến cả padding top và bottom
Giá trị thứ hai nhắm đến cả padding left và right

Kết quả:

Padding shorthand ba giá trị

Khi bạn dùng thuộc tính padding với ba giá trị, ví dụ:

button { padding: 12px 24px 8px; }

Giá trị đầu tiên là padding top
Giá trị thứ hai là cả padding left và right
Giá trị thứ ba là padding bottom

Kết quả:

Padding shorthand bốn giá trị

Khi bạn dùng thuộc tính padding với bốn giá trị, ví dụ:

button { padding: 12px 16px 12px 16px; }

Giá trị đầu tiên là padding top
Giá trị thứ hai là padding right
Giá trị thứ ba là padding bottom
Giá trị thứ tư là padding left

Khi nào nên dùng thuộc tính padding đơn chiều?

Thuộc tính padding shorthand "đánh bại" hoàn toàn các thuộc tính padding đơn chiều về mặt linh hoạt và hiệu quả.

Vậy tại sao bạn lại dùng, ví dụ:

padding-left: 24px;

Nếu bạn có thể dùng shorthand dưới đây để có cùng kết quả?

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

Lý do chính để dùng thuộc tính padding đơn chiều là khi bạn chỉ muốn thêm padding cụ thể cho một phía của phần tử, và để ba phía còn lại giữ nguyên giá trị padding mặc định/hiện tại của chúng (tùy thuộc vào thiết lập của bạn).

Tuy nhiên, giả sử bạn chỉ muốn padding ở phía trái của phần tử, nhưng padding bằng 0 ở top, right, bottom. Để làm điều đó bằng thuộc tính đơn chiều, code của bạn phải viết như sau để ghi đè bất kỳ giá trị padding hiện có nào ở top, right, bottom:

padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 24px

Đoạn code trên quá dài dòng cho việc có thể viết gọn trên một dòng bằng shorthand padding:

padding: 0 0 0 24px; /* top, right, bottom, left */

Những giá trị padding mặc định/hiện tại mà tôi nói đến là gì?

Tôi đang đề cập đến các style được kế thừa từ:

User Agent Stylesheet (UAS)
Thư viện hoặc framework CSS
Hoặc bất kỳ khai báo style nào do bạn tự thêm ở đầu file CSS (nhớ rằng CSS có tính kế thừa - cascade).

User Agent Stylesheet (UAS) là một file CSS tối thiểu mà mọi trình duyệt đều có sẵn. Nó đảm bảo rằng ngay cả khi bạn không thêm CSS nào cho website, vẫn có đủ style/format để nội dung dễ đọc cho người dùng cuối.

Ví dụ, nếu padding hiện tại trên phần tử button của bạn trông như sau (bất kể nó đến từ đâu):

button { padding-top: 16px; padding-right: 20px; padding-bottom: 20px; padding-left: 16px }

Và bạn tạo một class button chỉ định padding-top:

.button-login { padding-top: 40px; }

Thêm class đó vào phần tử button:

<button class="button-login">Login</button>

Thì nút login của bạn sẽ trông như sau:

Vì một lần nữa, các giá trị padding right, bottom, left được kế thừa từ nơi khác.

Như bạn có thể hình dung, dùng thuộc tính padding đơn chiều có thể gây nhầm lẫn hoặc kết quả khó đoán, tùy thuộc vào việc codebase CSS của bạn được tổ chức như thế nào.

Tôi hiếm khi dùng thuộc tính padding đơn chiều, vì ở đầu mọi dự án mới, tôi reset các giá trị padding về 0, sau đó thêm padding cho các component UI (phần tử HTML) dựa trên thang đo khoảng cách (spacing scale) của dự án.

Điều này làm cho quy trình làm việc của tôi dễ dự đoán hơn vì tôi không phải lo lắng về các style được truyền xuống bởi User Agent Stylesheet của trình duyệt X.

Với tất cả lý do nêu trên, tổng thể而言, dùng phương pháp padding shorthand để định nghĩa giá trị padding là thực tế hơn — trong hầu hết trường hợp.

Khi băn khoăn, hãy dùng padding shorthand.

Cách nhớ các padding shorthand

Shorthand bốn giá trị dễ nhớ nhất vì các giá trị được thêm theo chiều kim đồng hồ: top, right, bottom, left.

Hai và ba giá trị shorthand ít trực quan hơn:

Hai giá trị shorthand: 16px 8px (top-bottom, left-right)
Ba giá trị shorthand: 8px 16px 4px (top, left-right, bottom)

Lưu ý: trong thực tế, bạn hiếm khi cần dùng ba giá trị shorthand, mà theo tôi, nó không đáng để ghi nhớ (hãy dùng dung lượng não bộ cho việc khác). Tra cứu khi cần dùng.

Các đơn vị độ dài padding được chấp nhận

Các thuộc tính padding chấp nhận mọi loại đơn vị độ dài. Các đơn vị phổ biến nhất là px, rem, em, %, vw, vh, inherit.

Lưu ý: Tôi dùng đơn vị pixel px trong hướng dẫn này vì nó dễ liên quan hơn cho người mới bắt đầu (đây là đối tượng tôi giả định hầu hết các bạn là). Đặc biệt đúng nếu bạn đến từ nền tảng thiết kế trực quan dùng Illustrator, Sketch, Figma, v.v.

Tuy nhiên, pixel là đơn vị tuyệt đối có độ dài cố định, nên không scale tốt.

Các đơn vị tương đối như rem, em, %, vw, vh tuyệt vời cho việc scale, nhưng mỗi đơn vị làm theo cách riêng.

Tôi chủ yếu dùng rem cho giá trị padding, nhưng điều này chủ yếu là sở thích cá nhân trong thời đại mà mọi trình duyệt hiện đại đều xử lý được mọi loại đơn vị.

Tối ưu hiệu năng (đọc thêm nếu muốn)

Dành cho những bạn từ nền tảng tối ưu hiệu năng, tôi biết các bạn đang nghĩ gì:

"Có khác biệt chi phí hiệu năng giữa dùng padding shorthand so với dùng giá trị đơn chiều không?"

Câu trả lời là có. Tuy nhiên, gần như không thể dự đoán được ví dụ nào trong hai ví dụ sau hiệu năng tốt hơn:

padding: 8px 12px 16px 20px;

padding-top: 8px; padding-right: 12px; padding-bottom: 16px; padding-left: 20px;

Bạn có thể nghĩ shorthand rõ ràng hiệu năng hơn vì ít byte (dữ liệu) cần xử lý hơn.

Tuy nhiên, tất cả phụ thuộc vào những gì xảy ra giữa development và production về mặt xử lý code (parsing, minifying, compiling) và cách dự án được cấu hình/tổ chức.

Mọi khác biệt tiềm năng đều nhỏ đến mức không đáng lo ngại. Bạn cần chọn chiến tranh khôn ngoan, và về hiệu năng, bạn có "cá lớn" hơn nhiều để "chiên" thay vì các thuộc tính padding.