Awesome! You have learned how to add CSS to your web pages and how to size elements appropriately using the width and height properties of the box model. You also know how to add borders, margins, and padding to your elements!
Now it’s time to learn how to use CSS to position elements on your web pages. In this lesson, we will learn about the display property. This property is used to specify the behavior of an element in relation to its parent element. It is useful, for example, when you want to place an element at the center of its parent element.
There are many values that the display property can have. In this lesson, we will focus on the following values:
blockinlineinline-blocknone
Block and Inline Elements#
These are the two most common values of the display property. The block value is used to make an element behave like a block element. The inline value is used to make an element behave like an inline element. You can set the display property of an element to block or inline using the following syntax:
h1 {
display: block;
}
h1 {
display: inline;
}
The code above will make the h1 element behave like a block element and an inline element, respectively.
Block Elements#
Block elements are elements that behave like a block. You can think of block elements as paragraphs. They start on a new line. They also take up the entire width of their parent element.
Some of the most common block elements are:
divh1toh6pulolli
Width of Block Elements#
In the example below, the h1 and p elements are block elements. They take up the entire width of their parent element, which is the div element. Also, they start on a new line. You can see that the h1 element is on a new line and the p element is on a new line.
<div>
<h1>Block Element</h1>
<p>Block elements take up the entire width of their parent element.</p>
</div>
Height of Block Elements#
Another important aspect of block elements is that their height is determined by their content. If you have a div element with a p element inside it, the height of the div element will be determined by the height of the p element. Here’s an example:
<div>
<h1>Block Element</h1>
<p>Block elements take up the entire width of their parent element.</p>
</div>
The div element has a p element inside it. The height of the div element is determined by the height of the p element. Alternatively, you can set the height of the div element using the height property. Here’s an example:
<div style="height: 100px;">
<h1>Block Element</h1>
<p>Block elements take up the entire width of their parent element.</p>
</div>
Inline Elements#
Inline elements are elements that behave like they are part of the text. They do not take up the entire width of their parent element. You can think of inline elements as words. They start on the same line as the previous element. Here’s an example:
<div>
<h1>Block Element</h1>
<p>A paragraph with a <span>span</span> element. Here's another <span>span</span> element.</p>
<p>Another paragraph with a <a href="#">link</a>.</p>
</div>
In the code above, we took the p element from the previous example and added a span element and a a element inside it.
The span element is an inline element. It does not take up the entire width of its parent element, which is the p element. It also starts on the same line as the previous element. You can see that the span element is on the same line as the p element.
The span element is used to group inline elements. It is useful when you want to apply a style to a group of inline elements. For example, say you have a paragraph with a few words that you want to highlight. You can use the span element to group the words and apply a style to the span element. Here’s an example:
<div>
<h1>Block Element</h1>
<p>A paragraph with a <span style="color: red;">span</span> element. Here's another <span style="color: red;">span</span> element.</p>
<p>Another paragraph with a <a href="#">link</a>.</p>
</div>
Another example of an inline element is the a element. The a element is used to create links. It is an inline element. It does not take up the entire width of its parent element, which is the p element. It also starts on the same line as the previous element. You can see that the a element is on the same line as the elements around it.
Height and width of Inline Elements#
As you can see in the examples above, inline elements only take up the width necessary to display their content. And they do not have a height property. Instead, their height is determined by the font-size and line-height properties of their parent element (just like if they were just text).
Inline-block Elements#
The inline-block value is used to make an element behave like an inline element and a block element at the same time! You can set the display property of an element to inline-block using the following syntax:
.my-button {
display: inline-block;
}
inline-block elements are elements that behave like inline elements and block elements at the same time. They start on the same line as the previous element. They also take up the width necessary to display their content. However, they also have a height property. You can set the height of an inline-block element using the height property. Here’s an example:
<div>
<h1>Block Element</h1>
<p>A paragraph with a <span style="color: red;">span</span> element. Here's another <span style="color: red;">span</span> element.</p>
<p>Another paragraph with a <a href="#">link</a>.</p>
<button class="my-button">My Button</button>
</div>
.my-button {
display: inline-block;
height: 50px;
}
In the code above, we added a button element to the div element. We set the display property of the button element to inline-block. We also set the height property of the button element to 50px. As you can see, the button element is on the same line as the p element. It also takes up the width necessary to display its content. However, it also has a height property. You can see that the button element has a height of 50px.
Indeed, inline-block elements are very commonly buttons! This is because buttons are inline elements. But we usually want to be able to control their height and width. That’s why we use inline-block elements for them.
Display none#
Finally, the display property can be set to none. This is used to hide an element. You can set the display property of an element to none using the following syntax:
.my-button {
display: none;
}
If you set this property, the element will not be displayed on the page. It will not take up any space on the page. But remember that the element is still in the document tree. It is still there in the HTML and the user can very easily just right click on the page and select “View Page Source” to see the element.
Summary#
In this lesson, we learned about the display property. The display property is used to control how an element is displayed on the page. It can be set to block, inline, inline-block, or none.
There are many more values for the display property. But these are the most commonly used ones. You can learn more about the display property here.