CSS padding là một trong những thuộc tính của mô hình hộp CSS . Thuộc tính viết tắt này đặt đệm xung quanh tất cả bốn mặt của phần tử HTML. CSS padding có thể được áp dụng cho gần như mọi thẻ HTML (ngoại trừ một số thẻ bảng). Ngoài ra, tất cả bốn mặt của phần tử có thể có một giá trị khác nhau.
Thuộc tính đệm của CSS
Để sử dụng thuộc tính CSS padding nhanh, bạn có thể sử dụng “TROUBLe” (hoặc “TRiBbLe”) cho người hâm mộ Star Trek của bạn. Điều này là viết tắt của trên , bên phải , dưới cùng , và bên trái , và nó đề cập đến thứ tự của chiều rộng padding bạn đặt trong tài sản viết tắt. Ví dụ:
padding: phía trên bên phải dưới cùng bên trái; đệm: 1px 2px 3px 6px;Nếu bạn đã sử dụng các giá trị được liệt kê ở trên, nó sẽ áp dụng một giá trị đệm khác nhau cho mỗi bên của bất kỳ phần tử HTML nào bạn đang áp dụng nó. Nếu bạn muốn áp dụng cùng một padding cho tất cả bốn bên, bạn có thể đơn giản hóa CSS của bạn và chỉ cần viết một giá trị:
đệm: 12px;Với dòng CSS đó, 12 pixel đệm sẽ áp dụng cho tất cả 4 mặt của phần tử.
Nếu bạn muốn padding giống nhau cho trên cùng và dưới cùng và bên trái và bên phải, bạn có thể viết hai giá trị:
padding: 24px 48px;Giá trị đầu tiên (24px) sẽ áp dụng cho đầu và cuối, trong khi giá trị thứ hai sẽ áp dụng cho bên trái và bên phải.
Nếu bạn viết ba giá trị, điều đó sẽ làm cho phần đệm ngang (trái và phải) giống nhau, trong khi thay đổi phần trên cùng và dưới cùng:
padding: phía trên bên phải và bên trái phía dưới; padding: 0px 1px 3px;Theo mô hình hộp CSS, phần đệm gần nhất với phần tử / nội dung. Điều này có nghĩa là đệm được thêm vào phần tử ở giữa chiều rộng hoặc chiều cao nội dung và bất kỳ giá trị biên giới nào bạn sử dụng. Nếu padding được đặt thành 0, thì nó có cùng cạnh với nội dung.
Giá trị đệm CSS
CSS đệm có thể mất bất kỳ giá trị độ dài không âm. Đảm bảo chỉ định phép đo, chẳng hạn như px hoặc em. Bạn cũng có thể chỉ định phần trăm cho phần đệm của bạn, phần trăm này sẽ là phần trăm chiều rộng của khối chứa phần tử. Điều này bao gồm cho đệm trên và dưới. Ví dụ:
#container {width: 800px; chiều cao: 200px; } #container p {width: 400px; chiều cao: 75%; đệm: 25% 0; }Chiều cao của đoạn bên trong phần tử #container sẽ là 75% chiều cao của #container cộng với 25% chiều rộng cho phần đệm trên cùng và 25% chiều rộng cho phần đệm phía dưới. Tổng số này là 300 + 200 + 200 = 700px.
Ảnh hưởng của việc thêm CSS Padding
Trên các phần tử mức khối , phần đệm được áp dụng trên bốn mặt. Vì phần tử là một khối hoặc hộp đã có, phần đệm được áp dụng cho các cạnh của hộp.
Khi CSS padding được thêm vào các phần tử inline , có thể có một số chồng chéo các phần tử ở trên và bên dưới phần tử inline nếu phần đệm dọc vượt quá chiều cao dòng, nhưng nó sẽ không đẩy chiều cao của dòng xuống. Đệm CSS ngang được áp dụng cho các phần tử nội tuyến sẽ được thêm vào phần đầu của phần tử và phần cuối của phần tử. Và đệm có thể quấn đường kẻ. Nhưng nó sẽ không áp dụng cho tất cả các dòng của phần tử nhiều dòng, do đó bạn không thể sử dụng phần đệm để thụt lề một đoạn nội dung đa dòng.
Ngoài ra, trong CSS2.1, bạn không thể tạo các khối chứa nơi chiều rộng phụ thuộc vào phần tử có phần trăm cho độ rộng (hoặc độ rộng đệm). Nếu bạn thực hiện kết quả là không xác định. Trình duyệt sẽ vẫn hiển thị nội dung, nhưng bạn có thể không nhận được kết quả mong đợi. Nếu bạn nghĩ về nó, nó có ý nghĩa, như thể yếu tố container của bạn cần biết chiều rộng của các phần tử con của nó để xác định chiều rộng của nó - chẳng hạn như khi nó không có chiều rộng được xác định trước và một hoặc nhiều chiều rộng được đặt dưới dạng phần trăm của phần tử vùng chứa, điều này thiết lập một chuỗi hình tròn không có câu trả lời. Nếu bạn sử dụng tỷ lệ phần trăm cho chiều rộng của bất kỳ thứ gì trên tài liệu của mình, bạn nên đảm bảo rằng chiều rộng phần tử gốc cũng được xác định.