Chapter 10. CSS: Sizing and Spacing

Margin and Padding for Specific Side

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. On this page, 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).

link demo code

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

link demo code

If you want to set only specific sides of paddings or margins, you can use properties dedicated to each side. On this page, 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).

link demo code

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

link demo code

Tag: