CSS Padding property setting

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?

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
taxValery Ingemi Recent comment authors
newest oldest most voted
tax
Guest
tax

I am notice your all css coding :)

Valery Ingemi
Guest
Valery Ingemi

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). .:

The latest write-up from our blog site
<http://www.caramoanpackage.com