CSS Padding property setting

By mkyong | Updated: August 30, 2012

Viewed: 814

Tags: css

CSS Padding property setting is confusing sometime, because it can accept 1 value, 2 values , 3 or 4 values together.

For example, all the padding property setting below is valid.

padding: 10px;
padding: 10px 8px;
padding: 10px 8px 10px;
padding: 10px 8px 10px 9px;

CSS Padding Rule.

1) CSS padding order is follow clockwise sequence, as follow

padding: top  right  bottom left

2) The undeclared values are taken from the opposing side

CSS Padding Example

1) padding: 10px 8px 10px 9px;

The 4 values are easy to understand.

The result is 10px top, 8px right, 10px bottom and 9px left

2) padding: 10px 8px;

The 2 values are clear as well. Here we declare 10px top, and 8px right. Follow padding rule – The undeclared values are taken from the opposing side, “Top” value will assign to “Bottom” and “Right” value will assign to “Left” as well.

The result it 10px top, 8px right, 10px bottom and 8px left

3) padding: 10px 8px 10px;

This is the most confusing setting. Here we declare 10px top , 8px right and 10px bottom, Follow the padding rule – The undeclared values are taken from the opposing side, “Right” value will assign to “Left”.

The result is 10px top, 8px right, 10px bottom and 8px left

4) padding: 10px;

This property setting is a bit special, the setting will apply to all top, right and bottom and left value.

The result is 10px top, 10px right, 10px bottom and 10px left

Conclusion

Actually the alternative way of doing this one line CSS padding property setting is using
1) padding-top:
2) padding-right:
3) padding-bottom:
4) padding-left:

For example,

padding: 10px 8px 10px 9px;

is equivalent to

padding-top:10px; 
padding-right:8px;
padding-bottom:10px;
padding-left:9px;

I more prefer on multi line CSS padding property setting like padding-top or padding-right, the code is clean and easy to maintain. Why so many web developers want make thing complicated? Will one line padding property make it more professional?