point.comThe display Property in CSS
The display property is one of the most crucial and widely used properties. The CSS display property controls how an element is displayed on the page and how the element and the elements around it behave regarding the page’s layout.
Syntax
selector {
display: value;
}
- selector: The HTML element you want to style (e.g., div, span, p, etc.).
- value: Specifies how the element is displayed. Common values include block, inline, flex, grid, etc.
Common Values for display
block
The block-level elements: These elements take up the full width available (by default) and the height adjusts to the content inside. Block-level elements stack vertically and each new block-level element starts on a new line.
Common examples: <div>, <p>, <h1>, <section>, etc.
inline
inline elements: These elements only take up as much width as their content needs. They don’t start on a new line but instead flow within the line of text and are placed horizontally.
Common inline elements include: <span>, <a>, <strong>, etc
inline-block
inline-block elements: They behave like inline elements, but you can set a width and a height on them.
none
No display: The element will be removed from the layout entirely, and it will not take up any space.
flex
Flexbox: Used to create flexible container-based layouts, where items inside the container can be aligned and distributed in different ways.
grid
Grid layout: This is used to create grid-based layouts, where elements can be arranged into rows and columns.
list-item
Used for list elements, typically <li>, to display a list item with bullet points or numbers.
Examples: display with Flexbox and Grid
Flexbox Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
height: 100px;
}
.box {
width: 100px;
height: 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
The display: flex; property in the .container makes the child elements (.box) align horizontally. justify-content: space-between; spaces out the boxes, and align-items: center; vertically centers them.
Grid Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 20px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Quickly Find What You Are Looking For
OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.
Color Picker
