CSS padding adds space inside an element, between its content and its border. You set it with four properties, or one shorthand line. It keeps text and pictures from pressing against the edge of their box.
What padding does
Every box on a web page has content, padding, a border and a margin. Padding is the space between the content and the border. It is a basic tool of website design.
Without padding, text touches the edge of its box. That looks crowded and is hard to read. A few pixels of padding fix it right away.
You can pad text, images, buttons and whole page sections. You can add padding with inline CSS, which sits inside the HTML tag. You can also write a rule in a style sheet file.
The four padding properties
Each side of a box has its own property. In these examples, xx stands for the number of pixels.
padding-top: xxpx;
padding-right: xxpx;
padding-bottom: xxpx;
padding-left: xxpx;Replace xx with a number, such as 10. You only need the sides you want to change. A side you leave out keeps its default padding, which is usually zero.
Inline padding on text or a picture
Inline CSS goes inside the tag. It changes just that one element.
<div style="padding-left: 10px;">TEXT OR PICS HERE</div>This adds 10 pixels of space on the left inside the box. It is quick for a single fix. If you repeat it on many elements, a style sheet is easier to keep up.
A rule in your style sheet
To reuse padding, write a rule once and add the class to your image or text.
.your-image {
padding-left: 10px;
}Now add class="your-image" to any tag. Every element with that class gets the same padding. If you change the number later, all of them change together.
The shorthand for all four sides
You can set every side on one line. The values go in this order: top, right, bottom, left.
padding: 10px 20px 10px 20px;
/* one value pads all four sides */
padding: 10px;The first line pads 10 pixels on the top and bottom and 20 pixels on the left and right. The second line pads all four sides the same. Remember the order as clockwise, starting at the top.
When padding helps most
Buttons are a good example. A button with no padding looks cramped, and it is hard to tap on a phone. Ten to fifteen pixels on each side makes it easier to read and press.
Padding also helps pictures. A picture with a few pixels of padding and a light border looks like a framed photo.
Padding is not margin
People mix these two up often. Padding is space inside the border of an element. Margin is space outside it.
If you give a picture a background color, the color fills the padding. It does not fill the margin. That is a quick way to tell which one you are changing.
A common mistake is a box that grows wider after you add padding. The padding adds to the width you set. To keep the size fixed, add box-sizing: border-box; to the rule.
This is not a complete guide to padding. For more detail, see the CSS overview at the W3C. If you want a hand, we are in Omaha and answer the phone at 402-813-4034 every day from 7 am to 10 pm.
Common questions
Does padding go inside or outside the border?
Padding goes inside the border. Margin is the space outside it.
What order do the shorthand padding values follow?
Top, right, bottom, then left. You can remember it as clockwise from the top.
AboutRod and Tami Atwood
Rod and Tami Atwood and other Websnoogie contributors write the Websnoogie blog. Rod has built websites since 2004 and founded Websnoogie, LLC in Omaha in 2012. Tami is co-owner, content editor and billing expert. Call us at 402-813-4034 or write to staff@websnoogie.com.
