The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available
Examples of block-level elements:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary
Examples of inline elements:
Display: none;
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
The <script> element uses display: none; as default.
Syntax:
- display: none; -- hide any element
- visibility: hidden; - also hides an element.
The element will be hidden but still occupies the space of the element.
Override The Default Display Value
As mentioned, every element has a default display value. However, you can override this
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way
Example:
- li is a block element.
- We can make it an inline element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS display property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS display property</h1>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</body>
</html>
* {
box-sizing: border-box;
}
h1 {
text-shadow: 2px 2px 4px red;
margin-bottom: 30px;
}
li {
display: inline;
}
display: inline-block Value
- Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
- Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
- Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS position property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl
sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl
sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl
sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
h1 {
text-shadow: 2px 2px 4px red;
margin-bottom: 30px;
}
span.a {
display: inline;
/* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: rgb(20, 144, 22);
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: rgb(20, 197, 20);
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: rgb(20, 178, 49);
}
Output:
Do leave your comments