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.

chapter10.html
<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).

link

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.

chapter10.html
<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).

link