Chapter 10. CSS: Sizing and Spacing

Padding

Tag:

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

px
em
rem
%
vw
vh

Keyword

initial
inherit

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.

chapter10.html

<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 padding is zero.
- You can add padding for block elements horizontally and vertically; however, vertical padding for inline elements may overlap with another element.

You can also check the sample result here (Demo Site ).

demo code

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.

chapter10.html

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

practice.css

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

demo code

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.

chapter10.html

<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 padding property.

You can also check the sample result here (Demo Site ).

demo code

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

px
em
rem
%
vw
vh

Keyword

initial
inherit

Paddings for block elements and inline 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.

chapter10.html

<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 padding is zero.
- You can add padding for block elements horizontally and vertically; however, vertical padding for inline elements may overlap with another element.

You can also check the sample result here (Demo Site ).

demo code

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.

chapter10.html

<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

practice.css

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

demo code

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.

chapter10.html

<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 padding property.

You can also check the sample result here (Demo Site ).

demo code

Tag:

Back to the course page

history

Library

rating

Padding

Length and keyword

Length unit

Keyword

Paddings for block elements and inline elements

Practice 1

Objective: Test paddings for block elements and inline elements

1. Update the body section of the HTML file

2. Check the result with a browser

Paddings for child elements

Practice 2

Objective: Test paddings with child elements

1. Update the body section of the HTML file

2. Add CSS to child elements

3. Check the result with a browser

Paddings with multiple values

1 value (all sides)

2 values (top and bottom vs. right and left)

3 values (top vs. right and left vs. bottom)

4 values (clockwise order from the top)

Practice 3

Objective: Practice paddings with multiple property values

1. Update the body section of the HTML file

2. Check the result with a browser

Length and keyword

Length unit

Keyword

Paddings for block elements and inline elements

Practice 1

Objective: Test paddings for block elements and inline elements

1. Update the body section of the HTML file

2. Check the result with a browser

Paddings for child elements

Practice 2

Objective: Test paddings with child elements

1. Update the body section of the HTML file

2. Add CSS to child elements

3. Check the result with a browser

Paddings with multiple values

1 value (all sides)

2 values (top and bottom vs. right and left)

3 values (top vs. right and left vs. bottom)

4 values (clockwise order from the top)

Practice 3

Objective: Practice paddings with multiple property values

1. Update the body section of the HTML file

2. Check the result with a browser

Objective:
Test paddings for block elements and inline elements

Objective:
Test paddings with child elements

Objective:
Practice paddings with multiple property values

Objective:
Test paddings for block elements and inline elements

Objective:
Test paddings with child elements

Objective:
Practice paddings with multiple property values