Did you find this useful?
Socialize it today.


CSS Padding

Tuesday, March 20, 2012

tags CSS

CSS padding sets the padding around all four sides of an HTML element. CSS padding can be applied to nearly every HTML element. In addition, we can set each side of the element a different padding value. The padding clears an area around the content of an element. The padding is affected by the background color of the element. You can set the padding of an element using the shorthand padding property, or you can set the padding for each side individually.


Padding Property (Shorthand)

When using the shorthand padding property, set the values as follows: top, right, bottom, and left. For example:


p {padding: 1px 2px 3px 6px;}


If you want to apply the same padding to all four sides, you just use one value:


p {padding: 10px;}


If you want the padding to be the same for the top/bottom and left/right, you use two values:


p {padding: 10px 20px;}


Using three values, you will set the left and right padding the same, while setting the top and bottom with different values:


p {padding: 10px 5px 20px;}


If the padding is set to zero, then it has the same edge as the element. You should note that padding can be set using a non-negative value. You can specify the measurement as px, pt, em, in, cm, etc. You can also specify a percentage for your padding , which will be a percentage of the width of the element’s containing block.


Padding Individual Sides

As mentioned earlier, in CSS, it is possible to specify different padding values for each side of the HTML element:


p {padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:10px;}

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

CSS: The Missing Manual HTML CSS: The Complete Reference HTML CSS and JavaScript Editor