Padding adds space around the inside of an element. This means that any content the padded element contains will position itself in such a way to leave that space. The amount of padding inside an element can be measured with pixels or by percentage.
Without Padding
With Padding
Without Padding
<div style="width:100px; height:100px; background-color:#555555;">
<img src="dog.jpg" alt="dog wearing glasses"/>
</div>
With Padding
<div style="width:100px; height:100px; padding:20px; background-color:#555555;">
<img src="dog.jpg" alt="dog wearing glasses"/>
</div>
Typically, padding is set to an equal amount on all sides. However, there may be times where you only want one to three of the sides to observe your padding rule. In these situations, we add a hyphen and the desired side to the name of the property.
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
It’s important to note that padding counts toward an element's dimensions. If you have a div that is set to 300px wide and 300px tall, adding padding will change how large the div is displayed.
For example, adding a padding of 10px will result in a div with the dimensions 320px by 320px (10px of padding on the left and 10px on the right add a total of 20px to the width, and 10px of padding on both the top and bottom add a total of 20px to the height).
Thankfully, modern web design is fairly flexible. Most webpages are responsive and use percentage-based sizing to ensure their content will scale with the width of the browser window. That being said, it's still common to set a minimum or maximum width to an element in which padding can still play a part in the overall display. When you have a design where the fixed size of an element is required, you need to keep an eye out for these quirks in measurements. (You can click the button below to see another example.)
If a div must be 300px by 300px to fit into a design, but you need to add a padding of 20px, do a little subtraction from each side of your dimensions. 20px of padding all the way around a div adds 40px to both the width and height, so you would subtract 40px from each dimension. A div with a width of 260px and a height of 260px, plus 20px of padding will display at 300px by 300px.
You Try!
Using your own text editor or the coding space below, try adding padding to an element. To get a good idea of how it works, place a text element inside a div tag. Apply color to the div and then add padding to the text element.
