Chapter 10. CSS: Sizing and Spacing

Margin and Padding for Specific Side

Tag:

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

demo code

Practice 2

Objective:
Set margin for a specific side

1. Update the body section of the HTML file

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

demo code

Practice 1

Objective:
Set padding for a specific side

1. Update the body section of the HTML file

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

demo code

Practice 2

Objective:
Set margin for a specific side

1. Update the body section of the HTML file

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>