Margin and Padding for Specific Side
If you want to set only specific sides of paddings or margins, you can use properties dedicated to each side. In this lesson, we'll explain how to set specific sides of paddings or margins through the practice tasks.
Practice 1
Objective:
Set padding for a specific side
1. Update the body section of the HTML file
Add the code below to the chapter10.html file. We are using display: inline-block to show the results clearly. We'll explain about the display property later in this course. For now, just copy and paste the code.
<h2>Paddingds for Specific Side</h2>
<div class="size-child-object" style="display:inline-block;">Before padding</div>
<div class="size-child-object" style="display:inline-block;padding-top:50px;">padding-top: 50px</div>
<div class="size-child-object" style="display:inline-block;padding-bottom:50px;">padding-bottom: 50px</div>
<div class="size-child-object" style="display:inline-block;padding-left:50px;">padding-left: 50px</div>
<div class="size-child-object" style="display:inline-block;padding-right:50px;">padding-right: 50px</div>
<hr>
2. Check the result with a browser
- Open chapter10.html with a browser.
- You can see that padding is applied to a specific side of each box.
You can also check the sample result here (Demo Site).
Practice 2
Objective:
Set margin for a specific side
1. Update the body section of the HTML file
Add the code below to the chapter10.html file. We are using display: inline-block to show the results clearly. We'll explain about the display property later in this course. For now, just copy and paste the code.
<h2>Margins for Specific Side</h2>
<div class="size-object" style="display:inline-block">
<div class="size-child-object" style="display:inline-block;">Before padding</div>
</div>
<div class="size-object" style="display:inline-block">
<div class="size-child-object" style="display:inline-block;margin-top:50px;">margin-top: 50px</div>
</div>
<div class="size-object" style="display:inline-block">
<div class="size-child-object" style="display:inline-block;margin-bottom:50px;">margin-bottom: 50px</div>
</div>
<div class="size-object" style="display:inline-block">
<div class="size-child-object" style="display:inline-block;margin-left:50px;">margin-left: 50px</div>
</div>
<div class="size-object" style="display:inline-block">
<div class="size-child-object" style="display:inline-block;margin-right:50px;">margin-right:50px</div>
</div>
<hr>
2. Check the result with a browser
- Open chapter10.html with a browser.
- You can see that margin is applied to a specific side of each box.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.