Chapter 10. CSS: Sizing and Spacing

Width and height

Width and height
Tag:
course iconBack to the course page

The width and height properties determine the size of the element. Default property values are 'auto'; however, different HTML element types (block elements vs. inline elements) show different behavior. You can set the width and height properties for block elements, but you cannot set them for inline elements. You can also set the width and height property for inline-block elements which will be explained later in this course.

As a default setting, they (the width and height) are calculated from one edge to the other edge of content (content box) but you can extend them to the border edge using the box-sizing property. We'll explain box-sizing at the end of this chapter.

Length and keyword

You can specify width and height using one of the lengths or keywords.

Length units

  • px
  • em
  • rem
  • %
  • vw
  • vh

Keywords

  • auto (default)
  • initial
  • inherit

IdeaInitial and Inherit

When you use initial as a property value, CSS sets the property to its default value. When you use inherit as a property value, the property inherits its value from its parent element. These property values are available for all properties. Although we may not mention these keyword options in all topics, you can still use these keywords as a property value.

Width

Block element

The default value of the width property is auto. In the case of the block element, the element will be stretched out until its width becomes the width of its parent element. For block elements, you can also customize the width using the width property. Usually, you should specify the value within the width of its parent element. You can set the width of the value larger than the parent element's width, but this will result in the element overflowing beyond the parent element.

Inline element

In the case of the inline element , width is determined by the length of its content, and you cannot change the width of the inline element using the width property.

Practice 1

Objective:
Test the width property

1. Create a new HTML file for this chapter

  • Create a new file chapter10.html under the html-css-introduction directory.
  • Type ! and hit tab or enter to create an html template.
  • Change the <title> section to 10. CSS: Sizing and Spacing.
  • Before the <title> tag, add a link to the practice.css file.
  • The code should look like the one below.
chapter10.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/practice.css">
  <title>10. CSS: Sizing and Spacing</title>
</head>
<body>
  <h1>Chapter 10. CSS: Sizing and Spacing</h1>
</body>
</html>

2. Update the body section

Add the code below in the body section of the HTML file.
We added the size-object class in all elements below the <h2> element to add styles.

chapter10.html
<h2>Width</h2>
<div class="size-object">div element: Original</div>
<div class="size-object" style="width:300px">div element: Width 300px</div>
<p class="size-object">p element: Original</p>
<p class="size-object" style="width:300px">p element: Width 300px</p>
<a class="size-object">a element: Original</a>
<a class="size-object" style="width:300px">a element: Width 300px</a>
<span class="size-object">span element: Original</span>
<span class="size-object" style="width:300px">span element: Width 300px</span>
<hr>

3. Update the custom CSS file

Open the practice.css file and add new code to add color and margin to the size-object class to make the results visible.
We haven't explained the background-color, margin and border properties yet. For now, just copy and paste the code to your file.
For a code readability point of view, add a comment upfront.

practice.css
/* Chapter 10. CSS: Sizing and Spacing */
.size-object{
  background-color: #55D0DC;
  margin:10px;
  border:1px dotted white;
}

4. 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 block elements with <div> and <p> are stretched out horizontally.
    • The inline elements with <a> and <span> have widths determined by their content lengths.
    • You can adjust the width of block elements, but you cannot adjust the width of inline elements.

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

link demo code

Height

The default value of the height property is auto. Height is determined by the height of each element's content. You can customize the height of block elements; however, you cannot set the height of inline elements.

The height of inline elements is determined by their content size. Even the line-height property won't change the height of the content area. When you change the font-size of the element, you'll see that the height of the element follows the size of the font.

Practice 2

Objective:
Test the height property

1. Update the body section

Add the code below to the chapter10.html file.

chapter10.html
<h2>Height</h2>
<div class="size-object">div element: Original</div>
<div class="size-object" style="height:100px">div element: Height 100px</div>
<p class="size-object">p element: Original</p>
<p class="size-object" style="height:100px">p element: Height 100px</p>
<a class="size-object">a element: Original</a>
<a class="size-object" style="height:100px">a element: Height 100px</a>
<span class="size-object">span element: Original</span>
<span class="size-object" style="height:100px">span element: Height 100px</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 heights are the same for both block and inline elements (their content's height).
    • You can adjust height for the block elements but you cannot adjust height for the inline elements.
  • Click on the link below to open the demo site.

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

link demo code

The width and height properties determine the size of the element. Default property values are 'auto'; however, different HTML element types (block elements vs. inline elements) show different behavior. You can set the width and height properties for block elements, but you cannot set them for inline elements. You can also set the width and height property for inline-block elements which will be explained later in this course.

As a default setting, they (the width and height) are calculated from one edge to the other edge of content (content box) but you can extend them to the border edge using the box-sizing property. We'll explain box-sizing at the end of this chapter.

Length and keyword

You can specify width and height using one of the lengths or keywords.

Length units

  • px
  • em
  • rem
  • %
  • vw
  • vh

Keywords

  • auto (default)
  • initial
  • inherit

IdeaInitial and Inherit

When you use initial as a property value, CSS sets the property to its default value. When you use inherit as a property value, the property inherits its value from its parent element. These property values are available for all properties. Although we may not mention these keyword options in all topics, you can still use these keywords as a property value.

Width

Block element

The default value of the width property is auto. In the case of the block element, the element will be stretched out until its width becomes the width of its parent element. For block elements, you can also customize the width using the width property. Usually, you should specify the value within the width of its parent element. You can set the width of the value larger than the parent element's width, but this will result in the element overflowing beyond the parent element.

Inline element

In the case of the inline element , width is determined by the length of its content, and you cannot change the width of the inline element using the width property.

Practice 1

Objective:
Test the width property

1. Create a new HTML file for this chapter

  • Create a new file chapter10.html under the html-css-introduction directory.
  • Type ! and hit tab or enter to create an html template.
  • Change the <title> section to 10. CSS: Sizing and Spacing.
  • Before the <title> tag, add a link to the practice.css file.
  • The code should look like the one below.
chapter10.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/practice.css">
  <title>10. CSS: Sizing and Spacing</title>
</head>
<body>
  <h1>Chapter 10. CSS: Sizing and Spacing</h1>
</body>
</html>

2. Update the body section

Add the code below in the body section of the HTML file.
We added the size-object class in all elements below the <h2> element to add styles.

chapter10.html
<h2>Width</h2>
<div class="size-object">div element: Original</div>
<div class="size-object" style="width:300px">div element: Width 300px</div>
<p class="size-object">p element: Original</p>
<p class="size-object" style="width:300px">p element: Width 300px</p>
<a class="size-object">a element: Original</a>
<a class="size-object" style="width:300px">a element: Width 300px</a>
<span class="size-object">span element: Original</span>
<span class="size-object" style="width:300px">span element: Width 300px</span>
<hr>

3. Update the custom CSS file

Open the practice.css file and add new code to add color and margin to the size-object class to make the results visible.
We haven't explained the background-color, margin and border properties yet. For now, just copy and paste the code to your file.
For a code readability point of view, add a comment upfront.

practice.css
/* Chapter 10. CSS: Sizing and Spacing */
.size-object{
  background-color: #55D0DC;
  margin:10px;
  border:1px dotted white;
}

4. 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 block elements with <div> and <p> are stretched out horizontally.
    • The inline elements with <a> and <span> have widths determined by their content lengths.
    • You can adjust the width of block elements, but you cannot adjust the width of inline elements.

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

link demo code

Height

The default value of the height property is auto. Height is determined by the height of each element's content. You can customize the height of block elements; however, you cannot set the height of inline elements.

The height of inline elements is determined by their content size. Even the line-height property won't change the height of the content area. When you change the font-size of the element, you'll see that the height of the element follows the size of the font.

Practice 2

Objective:
Test the height property

1. Update the body section

Add the code below to the chapter10.html file.

chapter10.html
<h2>Height</h2>
<div class="size-object">div element: Original</div>
<div class="size-object" style="height:100px">div element: Height 100px</div>
<p class="size-object">p element: Original</p>
<p class="size-object" style="height:100px">p element: Height 100px</p>
<a class="size-object">a element: Original</a>
<a class="size-object" style="height:100px">a element: Height 100px</a>
<span class="size-object">span element: Original</span>
<span class="size-object" style="height:100px">span element: Height 100px</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 heights are the same for both block and inline elements (their content's height).
    • You can adjust height for the block elements but you cannot adjust height for the inline elements.
  • Click on the link below to open the demo site.

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

link demo code

Tag:
course iconBack to the course page
check recently viewed topics (history)
history
check bookmarked topics
Library
give rating and feedback
rating
share a URL via email or chat app
Share
check recently viewed topics (history)
history
check bookmarked topics
Library
give rating and feedback
rating
share a URL via email or chat app
Share