Cách sử dụng Thuộc tính đệm CSS

Tìm hiểu cách sử dụng CSS padding tài sản.

CSS padding thuộc tính được sử dụng để kiểm soát lượng không gian bên trong Các phần tử HTML giữa nội dung và đường viền của nó.

padding thường bị nhầm lẫn với CSS margin thuộc tính thêm không gian bên ngoài đường viền của một phần tử (đối lập với padding gì hiện).

Khái niệm cơ bản về CSS Padding

Đây là phần tử nút có nhãn văn bản (nội dung của nó):

<button>Button</button>

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

button { 
    padding: 24px;
}

Kết quả:

Nếu bạn thay đổi giá trị phần đệm thành 0 bạn nhận được cái này:

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

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (cái mà chúng tôi vừa mới sử dụng)

Bốn thuộc tính padding đầu tiên (-top, -right, -bottom, -left) là các thuộc tính đơn hướng, riêng lẻ chỉ có thể thêm padding vào một phía.

Cái cuối cùng, padding , được gọi là thuộc tính viết tắt, và nó là đặc tính linh hoạt nhất và được sử dụng nhiều nhất trong số năm thuộc tính đệm.

Hãy cùng khám phá padding tài sản nhiều hơn một chút.

Cách sử dụng tốc ký Padding

Viết tắt padding thuộc tính (sản phẩm duy nhất mà chúng tôi đã sử dụng cho đến nay) có thể thêm nhiều giá trị đệm cùng một lúc (một, hai, ba hoặc bốn giá trị).

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

Viết tắt một giá trị padding

Trong ví dụ về nút đệm 24px trước đó, bạn có thể đã làm điều này trong CSS của mình:

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

Nhưng điều đó thật lãng phí thời gian khi bạn có thể nhắm mục tiêu tất cả bốn phía cùng một lúc bằng cách sử dụng một giá trị đệm viết tắt:

button { 
    padding: 24px;
}

Viết tắt hai phần đệm giá trị

Điều gì sẽ xảy ra nếu bạn chỉ muốn thêm phần đệm 16px vào trên cùng và dưới cùng, nhưng 24px padding ở bên trái và bên phải thì sao?

Bạn có thể làm điều này (cách tốn thời gian):

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

Hoặc sử dụng người bạn tốt của bạn, hai giá trị padding viết tắt:

button {
    padding: 16px 24px;
}

Khi bạn sử dụng padding tài sản với hai các giá trị như trên:

• Giá trị đầu tiên nhắm mục tiêu cả phần đệm trên cùng và dưới cùng
• Giá trị thứ hai nhắm mục tiêu cả phần đệm bên trái và bên phải

Kết quả:

Viết tắt ba giá trị padding

Khi bạn sử dụng padding tài sản với ba giá trị, chẳng hạn như:

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

• Giá trị đầu tiên là phần đệm trên cùng
• Giá trị thứ hai là cả hai phần đệm trái và phải
• Giá trị thứ ba là phần đệm dưới cùng

Kết quả:

Viết tắt bốn giá trị đệm

Khi bạn sử dụng padding tài sản với bốn giá trị, chẳng hạn như:

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

• Giá trị đầu tiên là phần đệm trên cùng
• Giá trị thứ hai là phần đệm bên phải
• Giá trị thứ ba là phần đệm dưới cùng
• Giá trị thứ tư là phần đệm bên trái

Khi nào sử dụng thuộc tính đệm một hướng?

Viết tắt padding tài sản đánh bật các thuộc tính đệm đơn hướng về tính linh hoạt và hiệu quả.

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

padding-left: 24px;

Nếu bạn có thể sử dụng tốc ký dưới đây để có được kết quả tương tự?

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

Lý do chính để sử dụng thuộc tính đệm một hướng nếu vì bất cứ lý do gì mà bạn chỉ muốn thêm đệm cụ thể vào một mặt của phần tử và để giá trị đệm của ba mặt khác lên đến bất kỳ giá trị đệm mặc định / hiện tại của chúng là gì (điều này phụ thuộc trên thiết lập của bạn).

Tuy nhiên, giả sử rằng bạn chỉ muốn có phần đệm ở bên trái của một phần tử, nhưng không có phần đệm nào ở trên cùng, bên phải, dưới cùng. Để làm điều đó bằng cách sử dụng thuộc tính đệm một hướng, mã của bạn phải được viết như thế này để mọi giá trị đệm hiện có ở trên cùng, bên phải và dưới cùng đều bị ghi đè:

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

Bây giờ ở trên là một lượng mã khủng khiếp cho một thứ có thể được viết trên một dòng bằng cách sử dụng thuộc tính viết tắt:

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

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

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

• Biểu định kiểu tác nhân người dùng
• Khung hoặc thư viện CSS
• Hoặc bất kỳ khai báo kiểu nào khác do chính bạn thêm vào ở đầu biểu định kiểu CSS của bạn (hãy nhớ, CSS xếp tầng).

Biểu định kiểu tác nhân người dùng (UAS) là một biểu định kiểu CSS tối thiểu mà tất cả các trình duyệt đều tích hợp sẵn. Ở đó để đảm bảo rằng ngay cả khi bạn không tự thêm bất kỳ CSS nào vào trang web của mình, vẫn có đủ kiểu dáng / định dạng để người dùng cuối có thể đọc được nội dung của bạn.

Ví dụ:nếu phần đệm hiện tại trên phần tử nút của bạn trông giống như thế này (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 lớp nút chỉ giải quyết giá trị hàng đầu của phần đệm:

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

Và thêm nó vào một phần tử nút:

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

Sau đó, nút đăng nhập của bạn sẽ giống như sau:

Bởi vì một lần nữa, các giá trị đệm bên phải, dưới cùng và bên trái được kế thừa từ một nơi khác.

Như bạn có thể tưởng tượng, việc sử dụng thuộc tính đệm một hướng có thể gây ra nhầm lẫn hoặc kết quả không thể đoán trước, tùy thuộc vào cách tổ chức cơ sở mã CSS cụ thể của bạn.

I hiếm khi sử dụng thuộc tính đệm một hướng, vì khi bắt đầu mỗi dự án mới, tôi đặt lại các giá trị đệm của mình thành 0, sau đó thêm giá trị đệm vào các thành phần giao diện người dùng (phần tử HTML) dựa trên tỷ lệ giãn cách 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 kiểu khác nhau do Biểu định kiểu tác nhân người dùng của trình duyệt X.

Vì tất cả các lý do đã nêu ở trên, về tổng thể, việc sử dụng padding viết tắt sẽ thiết thực hơn phương pháp xác định giá trị đệm - hầu hết thời gian.

Khi nghi ngờ, hãy sử dụng viết tắt đệm.

Cách nhớ padding shorthands

Viết tắt bốn giá trị là cách dễ nhớ nhất vì các giá trị được thêm vào theo chiều kim đồng hồ: trên, phải, dưới, trái.

Viết tắt giá trị hai và ba ít rõ ràng hơn:

• Viết tắt hai giá trị:16px 8px (trên-dưới, trái-phải)
• Viết tắt ba giá trị:8px 16px 4px (trên cùng, trái-phải, dưới cùng)

Lưu ý: trong thực tế, bạn sẽ hiếm khi cần sử dụng tốc ký ba giá trị, mà đối với tôi, nó không đáng ghi nhớ (sử dụng khả năng não của bạn cho việc khác). Tra cứu nó nếu bạn cần sử dụng nó.

Đơn vị độ dài vùng đệm có thể chấp nhận

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

Lưu ý: Tôi đã sử dụng đơn vị pixel px trong hướng dẫn này vì đây là loại đơn vị dễ hiểu hơn dành cho người mới bắt đầu (tôi cho rằng hầu hết các bạn đều vậy). Điều này đặc biệt đúng nếu bạn xuất thân từ nền tảng thiết kế trực quan bằng Illustrator, Sketch, Figma, v.v.

Tuy nhiên, pixel là đơn vị tuyệt đối có độ dài cố định, vì vậy chúng không mở rộng quy mô tốt.

Các đơn vị tương đối, chẳng hạn như rem nói trên , em , % , vw , vh , rất xuất sắc trong việc mở rộng quy mô, nhưng mỗi người lại giải quyết vấn đề này theo những cách khác nhau.

I chủ yếu sử dụng rem cho các giá trị đệm của tôi, nhưng đây chủ yếu là vấn đề được ưu tiên trong thời đại ngày nay, nơi tất cả các trình duyệt hiện đại có thể xử lý tất cả các loại đơn vị.

Tối ưu hóa hiệu suất (đọc tùy chọn)

Đối với những người bạn đến từ nền tảng tối ưu hóa hiệu suất, tôi biết bạn đang nghĩ gì:

“Có sự khác biệt về hiệu suất / chi phí khi sử dụng viết tắt đệm thay vì sử dụng các giá trị hướng đơn không?”

Câu trả lời là có. Tuy nhiên, không thể dự đoán được ví dụ nào trong số hai ví dụ sau là hoạt động hiệu quả nhất:

padding: 8px 12px 16px 20px;

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

Bạn có thể nghĩ rằng tốc ký là lựa chọn hiệu quả nhất rõ ràng, bởi vì nó có ít byte (dữ liệu) hơn để xử lý.

Tuy nhiên, tất cả phụ thuộc vào những gì xảy ra giữa quá trình phát triển và sản xuất về mặt xử lý mã (phân tích cú pháp, thu nhỏ, biên dịch) và cách dự án của bạn được định cấu hình và tổ chức.

Bất kỳ sự khác biệt tiềm ẩn nào đều rất nhỏ đến mức không đáng phải lo lắng. Bạn cần phải lựa chọn các trận chiến của mình một cách khôn ngoan và khi nói đến hiệu suất, bạn có những con cá lớn hơn nhiều để chiên hơn là thuộc tính độn.