CSS Display
CSS display is a property that specifies the display behavior of an element. It determines how an element is rendered on the page and how it interacts with other elements. Here are some common values for the display property with examples:
1. block
- Description: The element is displayed as a block-level element, taking up the full width available and starting on a new line.
- Examples:
<div>,<p>,<h1>, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Display</title>
<style>
.block-example {
display: block;
width: 200px;
height: 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="block-example">Block Element</div>
<div class="block-example">Another Block Element</div>
</body>
</html>
2. inline
- Description: The element is displayed as an inline element, only taking up as much width as necessary and not starting on a new line.
- Examples:
<span>,<a>,<strong>, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Display</title>
<style>
.inline-example {
display: inline;
width: 200px; /* Width and height will not be respected */
height: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<span class="inline-example">Inline Element</span>
<span class="inline-example">Another Inline Element</span>
</body>
</html>
3. inline-block
- Description: The element is displayed as an inline-level block container. It allows setting width and height, but it does not start on a new line.
- Examples:
<img>,<button>, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline-Block Display</title>
<style>
.inline-block-example {
display: inline-block;
width: 200px;
height: 50px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="inline-block-example">Inline-Block Element</div>
<div class="inline-block-example">Another Inline-Block Element</div>
</body>
</html>
4. none
- Description: The element is not displayed and does not take up any space on the page. It is removed from the layout.
- Examples: Often used for hiding elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>None Display</title>
<style>
.none-example {
display: none;
}
</style>
</head>
<body>
<div class="none-example">This element will not be visible.</div>
<div>Other Content</div>
</body>
</html>
5. flex
- Description: The element is a flex container, allowing its children to be laid out according to the flexbox model.
- Examples: Commonly used in modern layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Display</title>
<style>
.flex-container {
display: flex;
background-color: lightgoldenrodyellow;
}
.flex-item {
background-color: lightsteelblue;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
6. grid
- Description: The element is a grid container, allowing its children to be laid out according to the grid model.
- Examples: Useful for complex layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Display</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: lightgray;
}
.grid-item {
background-color: lightseagreen;
padding: 20px;
}
</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>
These examples cover some of the most commonly used display values in CSS. Each value helps control the layout and visibility of elements on a webpage.
0
likes
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.