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 Display Block in CSS
The CSS display: block property makes an element behave as a block-level element, taking up the full width of its parent container and starting on a new line. Block elements stack vertically and can have width, height, margins, and padding applied on all sides.
Syntax
selector {
display: block;
}
Default Block Elements
Elements like <div>, <p>, <h1-h6>, <section>, and <header> are block-level by default. You can also convert inline elements to block elements using the display property.
Example: Converting Inline to Block
The following example converts an inline <span> element to behave as a block element −
<!DOCTYPE html>
<html>
<head>
<style>
.inline-span {
background-color: #ffeb3b;
padding: 10px;
margin: 5px;
}
.block-span {
display: block;
background-color: #4caf50;
color: white;
padding: 10px;
margin: 5px;
width: 200px;
}
</style>
</head>
<body>
<h3>Inline Span (default)</h3>
<span class="inline-span">Inline span 1</span>
<span class="inline-span">Inline span 2</span>
<h3>Block Span (display: block)</h3>
<span class="block-span">Block span 1</span>
<span class="block-span">Block span 2</span>
</body>
</html>
Two yellow inline spans appear side by side on the first line. Below them, two green block spans appear stacked vertically, each taking up their defined width and starting on new lines.
Example: Block vs Inline-Block
This example demonstrates the difference between display: block and display: inline-block −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f0f0f0;
padding: 20px;
margin: 10px 0;
}
.block-element {
display: block;
background-color: #2196f3;
color: white;
padding: 15px;
margin: 5px;
width: 150px;
}
.inline-block-element {
display: inline-block;
background-color: #ff9800;
color: white;
padding: 15px;
margin: 5px;
width: 150px;
}
</style>
</head>
<body>
<div class="container">
<h3>Display: Block</h3>
<div class="block-element">Block 1</div>
<div class="block-element">Block 2</div>
</div>
<div class="container">
<h3>Display: Inline-Block</h3>
<div class="inline-block-element">Inline-Block 1</div>
<div class="inline-block-element">Inline-Block 2</div>
</div>
</body>
</html>
The first container shows two blue blocks stacked vertically. The second container shows two orange blocks positioned side by side horizontally.
Responsive Block Layout
Block elements are useful for creating responsive layouts using media queries −
<!DOCTYPE html>
<html>
<head>
<style>
.card {
float: left;
width: 30%;
margin: 1.66%;
padding: 20px;
background-color: #e1f5fe;
border: 1px solid #01579b;
text-align: center;
}
@media screen and (max-width: 600px) {
.card {
width: 96%;
display: block;
float: none;
margin: 2%;
}
}
.container::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Responsive Cards (Resize window to see effect)</h2>
<div class="container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</body>
</html>
Three cards appear side by side on larger screens. When the window is resized below 600px, the cards stack vertically as block elements.
Conclusion
The display: block property is essential for creating layouts where elements need to stack vertically and take full width. It's particularly useful for responsive design and converting inline elements to block-level behavior.
1K+ Views
