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
Selected Reading
Role of CSS justify-content property space-around value
The CSS justify-content property with the space-around value distributes flex items evenly along the main axis with equal space around each item. This creates equal spacing on both sides of each item, making the space between adjacent items twice as large as the space at the edges.
Syntax
.container {
display: flex;
justify-content: space-around;
}
Example
You can try to run the following code to implement the space-around value −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #f0f0f0;
justify-content: space-around;
border: 2px solid #ccc;
padding: 10px;
}
.mycontainer > div {
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 60px;
font-size: 20px;
width: 80px;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Justify Content: Space Around</h3>
<div class="mycontainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
Four green rounded boxes labeled "Item 1", "Item 2", "Item 3", and "Item 4" are displayed horizontally with equal space around each item. The space between adjacent items is twice the space at the container edges.
Conclusion
The space-around value creates balanced spacing by giving each flex item equal space on both sides. This is ideal when you want consistent spacing around items with smaller gaps at the container edges.
Updated on: 2026-03-15T13:05:46+05:30
185 Views
Advertisements