Giá trị thứ ba trong CSS padding là gì?

Question

Tôi đang chơi đùa với các Less Framework 3 và tôi thấy dòng này trong css:

body { 
    padding: 60px 42px 0; 
    width: 396px; 
} 

gì padding: 0 làm gì?

Điều này không giống như viết tắt css thông thường và top-right-bottom có vẻ lạ.

Answer 1

Các padding và margin thuộc tính chỉ định top right bottom left.
Nếu bỏ qua left, nó sẽ mặc định là right.

Do đó, padding: a b c tương đương với padding: a b c b.

Nếu bottom cũng bị bỏ qua, nó sẽ mặc định là top.
Do đó, padding: a b tương đương với padding: a b a b.

Nếu right là cũng bỏ qua, giá trị duy nhất được sử dụng cho cả 4 mặt.
Do đó, padding: a tương đương với padding: a a a a.

Answer 2

Khi bạn chỉ định ba giá trị, giá trị thứ hai được sử dụng ngầm cho thứ tư, nghĩa là đệm: 60px 42px 0 42px;

Answer 3

Có ba phiên bản viết tắt khi chỉ định bốn giá trị độ dày. Các phím tắt này cũng áp dụng cho các thuộc tính tương tự, chẳng hạn như lề, đường viền và đường viền.

Xác định 1 giá trị:

margin: 10px; 
/*same as*/ 
margin: 10px 10px 10px 10px; 

... có nghĩa là sử dụng 10px cho tất cả 4 phía.

margin: 10px 15px; 
/*same as*/ 
margin: 10px 15px 10px 15px; 

... có nghĩa là sử dụng 10px cho trên cùng và dưới cùng và 15px cho trái và phải.

margin: 10px 15px 20px; 
/*same as*/ 
margin: 10px 15px 20px 15px; 

... có nghĩa là sử dụng 10px cho trên cùng, 15px cho trái và phải và 20px cho dưới cùng.

Answer 4

tốt nhất bao giờ giải thích bởi W3School: - http://www.w3schools.com/css/css_padding.asp

Vì vậy, đây là cách hoạt động:

Nếu thuộc tính đệm có bốn giá trị:

padding: 25px 50px 75px 100px; 
    top padding is 25px 
    right padding is 50px 
    bottom padding is 75px 
    left padding is 100px 

Nếu thuộc tính đệm có ba giá trị:

padding: 25px 50px 75px; 
    top padding is 25px 
    right and left paddings are 50px 
    bottom padding is 75px 

Nếu thứ bất động sản e đệm có hai giá trị:

padding: 25px 50px; 
    top and bottom paddings are 25px 
    right and left paddings are 50px 

Nếu thuộc tính đệm có một giá trị:

padding: 25px; 
    all four paddings are 25px