When building a website, the way you display elements on it is very important. The crucial part of the website is the layout because it allows the user to navigate through the website on their own. For example, the navigation bar is always at the top so that users can easily access the website pages. To display elements on your website correctly, we use the display CSS property.
In this lesson, we'll discuss basic display properties. You will learn about four different types of these properties, their purpose, and their usage. Let's get started!
Basic Display Properties
The display CSS property is the property that specifies the display behavior of an HTML element. The display property is very important because it significantly impacts the HTML element layout. There are multiple types of display properties. In this lesson, we'll consider four basic types of display properties:
display: block;. The HTML element is displayed as a block element,display: inline;. The HTML element is displayed as an inline element,display: inline-block;. The HTML element is displayed as an inline-level block container,display: none;. The HTML element is removed.
In the next steps, we will go through each CSS property. To demonstrate their usage, we will use the same piece of code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Display Properties</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container one">
<p>Item number 1</p>
<p>Item number 2</p>
<p>Item number 3</p>
</div>
<div class="container two">
<p>Item number 1</p>
<p>Item number 2</p>
<p>Item number 3</p>
</div>
<div class="container three">
<p>Item number 1</p>
<p>Item number 2</p>
<p>Item number 3</p>
</div>
</body>
</html>.container{
font-family: 'Courier New', Courier, monospace;
color: black;
margin-top: 1em;
border: 1pt black solid;
}Your starter web page looks like this:
Block
The display: block; property is one of the basic display properties. It allows you to display the HTML elements as a block element. Block-level elements always start on the new line and take up the entire full-screen width available. In the code below we applied the display:block; property:
.container{
font-family: 'Courier New', Courier, monospace;
color: black;
margin-top: 1em;
border: 1pt black solid;
}
p{
display: block;
}Now your code output looks like this:
You can notice how the container took up the entire screen and that it doesn't look any different from the starter web page. This is because the display block is the default value of the HTML <div> element.
Inline
Unlike block-level elements, inline-level elements don't start at the beginning of the new line. On the contrary, they only take up as much width as necessary. The display: inline; property is perfect when you want to expand a certain container to the size of the content in it. In the code snippet below, we applied the display: inline; property:
.container{
font-family: 'Courier New', Courier, monospace;
color: black;
margin-top: 1em;
border: 1pt black solid;
}
p{
display: inline;
}
Here is the output:
Inline-block
The display: inline; and display: inline-block; are quite similar, but they do have a few differences. The main difference is that display: inline-block; allows setting the width and height on the elements, whereas display: inline; does not. Also, the display: inline-block; respects the top and bottom margins and padding. Try to see the difference between the pictures with inline and inline-block elements. Check out the code snippet below:
.container{
font-family: 'Courier New', Courier, monospace;
color: black;
margin-top: 1em;
border: 1pt black solid;
}
p{
display: inline-block;
}
Now your code output looks like this:
None
When you apply the display: none; property to the HTML element, it becomes invisible and doesn't have any effect on the layout. This property is commonly used in JavaScript to hide and show the elements without actually deleting and recreating them. Also, the <script> element uses display: none; as a default value. In this part, we applied the property to the paragraph that is now invisible:
.container{
font-family: 'Courier New', Courier, monospace;
color: black;
margin-top: 1em;
border: 1pt black solid;
}
p{
display: none;
}
Here is the output:
Conclusion
In this lesson, we discussed basic display properties. You learned about different types of display properties, what they are and how to use them. Now you can place your HTML elements as you wish and create a great website layout. Let's put it to the test!