Các paddingbất động sản trong CSS định nghĩa các phần trong cùng của mô hình hộp, tạo ra không gian xung quanh nội dung của một nguyên tố, bên trong bất kỳ lợi nhuận và / hoặc biên giới xác định.
Giá trị đệm được đặt bằng độ dài hoặc tỷ lệ phần trăm và không thể chấp nhận giá trị âm. Giá trị ban đầu hoặc mặc định cho tất cả các thuộc tính đệm là 0.
Đây là một ví dụ đơn giản:
.box ( padding: 0 1.5em 0 1.5em; )Ví dụ trên đang sử dụng thuộc tính tốc paddingký, chấp nhận tối đa bốn giá trị, được hiển thị ở đây:
.box ( padding: || || || )Nếu ít hơn bốn giá trị được đặt, các giá trị bị thiếu được giả định dựa trên những giá trị được xác định. Ví dụ: hai bộ quy tắc sau sẽ nhận được kết quả giống hệt nhau:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Do đó, nếu chỉ có một giá trị được xác định, điều này sẽ đặt tất cả bốn thuộc tính đệm thành cùng một giá trị:
.box ( padding: 20px; )Nếu ba giá trị được khai báo, nó là padding: (top) (left-and-right) (bottom);.
Bất kỳ thuộc tính đệm riêng lẻ nào cũng có thể được khai báo bằng cách sử dụng thủ thuật, trong trường hợp đó, bạn sẽ chỉ xác định một giá trị cho mỗi thuộc tính. Vì vậy, ví dụ trước có thể được viết lại như sau:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Tính toán đệm và chiều rộng phần tử
Nếu một phần tử có chiều rộng được chỉ định, bất kỳ khoảng đệm nào được thêm vào phần tử đó sẽ thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn, vì nó yêu cầu phải tính toán lại chiều rộng của phần tử mỗi khi phần đệm được điều chỉnh. (Lưu ý rằng điều này cũng xảy ra với chiều cao, nhưng trong hầu hết các trường hợp, không nên đặt chiều cao cho một phần tử.)
Ví dụ:
.box ( padding: 20px; width: 400px; )Trong ví dụ này, mặc dù .boxphần tử có chiều rộng rõ ràng là 400px, nhưng chiều rộng được hiển thị thực tế của phần tử trên trang sẽ là 440px. Điều này không chỉ tính đến chiều rộng 400px, mà còn tính đến 20px của phần đệm bên trái và 20px của phần đệm bên phải (được định nghĩa bằng cách viết tắt của padding trong ví dụ trước).
Điều này xảy ra để duy trì 400px không gian nội dung, thay vì 400px tổng chiều rộng của phần tử. Đây là một cây bút thể hiện điều này:
Điều này xảy ra trong tất cả các trình duyệt đang sử dụng, ở chế độ tiêu chuẩn, nhưng sẽ không xảy ra trong IE6 và IE7 ở chế độ kỳ quặc (nghĩa là trên các trang được hiển thị trong IE6 hoặc IE7 nơi không có loại tài liệu nào được khai báo hoặc nơi có điều gì đó khác đang xảy ra để kích hoạt trạng thái kỳ quặc chế độ).
Để giải quyết vấn đề này, do đó giữ chiều rộng ở 400px bất kể số lượng đệm, bạn có thể sử dụng thuộc box-sizingtính:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Điều này làm cho phần tử duy trì chiều rộng của nó trong khi tăng phần đệm, do đó làm giảm không gian nội dung có sẵn. Đây là một minh chứng:
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Vâng | Vâng | Vâng | Vâng | Vâng | Vâng | Vâng |