Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Working with CSS Display Property
The CSS display property is used to set how an element is displayed on a web page. With this property, you can create grid layouts, flex containers, inline elements, and more. It controls the layout behavior of elements and how they interact with other elements.
Syntax
selector {
display: value;
}
Possible Values
| Property Value | Description |
|---|---|
inline |
Displays an element as an inline element. |
block |
Displays an element as a block element. |
contents |
Makes the container disappear, making the child elements children of the element the next level up in the DOM |
flex |
Displays an element as a block-level flex container |
grid |
Displays an element as a block-level grid container |
inline-block |
Displays an element as an inline-level block container. |
inline-flex |
Displays an element as an inline-level flex container |
inline-grid |
Displays an element as an inline-level grid container |
none |
The element is completely removed from the document flow |
Example: Display Inline
The inline value displays an element as an inline element, flowing with the text content −
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
padding: 2px 5px;
}
.hidden {
display: none;
}
.inline-element {
display: inline;
}
</style>
</head>
<body>
<h2>Match Details</h2>
<div>
Match will begin at <span class="hidden">9AM</span> <span class="inline-element">10AM</span> on 20th December.
</div>
<div>
Match will end at <span class="inline-element">5PM</span> on 20th December.
</div>
</body>
</html>
A page showing match details where "9AM" is hidden (display: none) and "10AM" and "5PM" appear as inline elements with orange background and white text, flowing naturally with the surrounding text.
Example: Display Block and Inline-Block
Block elements take up the full width available, while inline-block elements behave like inline elements but accept width and height properties −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
padding: 10px;
margin: 5px;
}
.block-element {
display: block;
width: 200px;
}
.inline-block-element {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<h2>Match Details</h2>
<div>
Match will begin at <p class="block-element">10AM</p> on 19th December, 2019.
</div>
<div>
Match will end at <p class="inline-block-element">5PM</p> on 19th December, 2019.
</div>
</body>
</html>
A page showing match details where "10AM" appears as a block element (takes full width, breaks to new line) and "5PM" appears as an inline-block element (flows with text but has defined width). Both have orange background with white text.
Example: Display Grid
The grid value creates a grid layout container. This example creates a three-column grid layout −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: orange;
text-align: center;
padding: 20px;
font-size: 24px;
color: white;
}
</style>
</head>
<body>
<h2>Grid Layout Example</h2>
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
</body>
</html>
A blue container with six orange grid items arranged in two rows and three columns. Each item contains white text ("Item 1", "Item 2", etc.) and is evenly spaced with a 10px gap between items.
Conclusion
The display property is fundamental for controlling element layout behavior. Use block for full-width elements, inline for text flow, flex for flexible layouts, and grid for two-dimensional layouts.
132 Views
