padding
Padding plays an important role in design layout. Without padding, content is always close to its borders, which makes the design look crowded.
Length and keyword
You can specify the padding property size using one of the length units or keywords. The default padding value is 0. Unlike width, height, and margin, padding has no auto keyword.
Length unit
pxemrem%vwvh
Keyword
initialinherit
Paddings for block elements and inline elements
Like the width and height properties, behaviors of padding can differ by type of element. You can set the padding property for block elements horizontally and vertically; however, when you set padding for inline elements vertically, the design may not look good as the padding set vertically for inline elements can create overlaps with other elements.
Practice 1
Objective:
Test paddings for block elements and inline elements
1. Update the body section of the HTML file
Add the code below to the chapter10.html file.
<h2>Padding</h2>
<div class="size-object">div element: Original</div>
<div class="size-object" style="padding:20px">div element: Padding 10px</div>
<p class="size-object">p element: Original</p>
<p class="size-object" style="padding:20px">p element: Padding 10px</p>
<a class="size-object">a element: Original</a>
<a class="size-object" style="padding:20px">a element: Padding 10px</a>
<span class="size-object">span element: Original</span>
<span class="size-object" style="padding:20px">span element: Padding 10px</span>
<hr>
2. Check the result with a browser
- Open chapter10.html with a browser.
- You can see how each element is displayed. From this, you can understand:
- The default
paddingis zero. - You can add
paddingfor block elements horizontally and vertically; however, vertical padding for inline elements may overlap with another element.
- The default
You can also check the sample result here (Demo Site).
Paddings for child elements
Paddings are also applied when an element has child elements.
Practice 2
Objective:
Test paddings with child elements
1. Update the body section of the HTML file
Add the code below to the chapter10.html file.
<h2>Padding: nesting</h2>
<div class="size-object" style="padding:10px">
<div class="size-child-object">div child element</div>
<div class="size-child-object">div child element</div>
</div>
<hr>
2. Add CSS to child elements
Open practice.css and add new code to add color and margin to each HTML element.
We haven't explained the background-color, margin, and border properties yet. For now, just copy and paste the code into your file.
.size-child-object{
background-color: #1E838A;
color:white;
}
3. Check the result with a browser
- Open chapter10.html with a browser.
- You can see that paddings are applied to the block element with child elements.
You can also check the sample result here (Demo Site).
Paddings with multiple values
You can set different padding sizes for different sides of an element.
1 value (all sides)
When you specify only one padding value, the value is applied to all sides of the element.
2 values (top and bottom vs. right and left)
When you specify two padding values, the first value is applied to the top and bottom padding while the second value is applied to the right and left padding.
3 values (top vs. right and left vs. bottom)
When you specify three padding values, the first value is applied to the top padding, the second value is applied to the right and left padding, and the last value is applied to the bottom padding.
4 values (clockwise order from the top)
When you specify four padding values, the value is applied from the top in the clockwise order (the order of top, right, bottom, and left).
Practice 3
Objective:
Practice paddings with multiple property values
1. Update the body section of the HTML file
Add the code below to the chapter10.html file.
<h2>Padding: multiple values</h2>
<div class="size-object" style="width:200px;">
<div class="size-child-object">Before padding</div>
</div>
<div class="size-object" style="width:200px; padding:10px">
<div class="size-child-object">Padding 10px</div>
</div>
<div class="size-object" style="width:200px; padding:5px 10px">
<div class="size-child-object">Padding 5px 10px</div>
</div>
<div class="size-object" style="width:200px; padding:5px 10px 1px">
<div class="size-child-object">Padding 5px 10px 1px</div>
</div>
</div>
<div class="size-object" style="width:200px; padding:5px 10px 1px 2px">
<div class="size-child-object">Padding 5px 10px 1px 2px</div>
</div>
<hr>
2. Check the result with a browser
- Open chapter10.html with a browser
- You can see that values are applied in different ways depending on how many values you set for the
paddingproperty.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.
More Topics to Explore
float: left and right
Styling Components with AI: Buttons, Cards, and More
list-style-position
