CSS Properties: How to set space-around items with space before, between, and after the lines?

Last update on February 15 2024 06:20:51 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Specify character encoding -->
<title>How to set space-around items with space before, between, and after the lines</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->

<div id="xyz"><!-- Start of div with id "xyz" -->
<p>align-content: space-around</p><!-- Paragraph describing alignment -->
<div id="w3r"><!-- Start of div with id "w3r" -->
<div></div><!-- First nested div -->
<div></div><!-- Second nested div -->
<div></div><!-- Third nested div -->
<div></div><!-- Fourth nested div -->
<div></div><!-- Fifth nested div -->
<div></div><!-- Sixth nested div -->
</div><!-- End of div with id "w3r" -->
</div><!-- End of div with id "xyz" -->

<style type="text/css">/*Start of CSS styling */

#xyz > div { /* CSS rule for direct children of div with id "xyz" */
display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
display: -ms-flex; /* Use flexbox layout for Microsoft browsers */
display: flex; /* Use flexbox layout for other browsers */
-webkit-flex-flow: row wrap; /* Set flex direction to row and allow wrapping for WebKit browsers */
flex-flow: row wrap; /* Set flex direction to row and allow wrapping for other browsers */
width: 140px; /* Set width of the container div to 140 pixels */
height: 140px; /* Set height of the container div to 140 pixels */
background: #CC0000; /* Set background color of the container div */
}
#xyz > div > div { /* CSS rule for direct children of divs nested under div with id "xyz" */
margin: 2px; /* Set margin of the nested divs */
width: 30px; /* Set width of the nested divs to 30 pixels */
min-height: 30px; /* Set minimum height of the nested divs to 30 pixels */
background: #FFCC99; /* Set background color of the nested divs */
}
#w3r { /* CSS rule for div with id "w3r" */
-webkit-align-content: space-around; /* Align content with space around for WebKit browsers */
align-content: space-around; /* Align content with space around for other browsers */
}
</style><!-- End of CSS styling -->

</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

The HTML code creates a container div with the ID "xyz" and a paragraph describing the alignment.
Inside the container div, there is another div with the ID "w3r" containing six nested divs.
CSS is used to style the container div and its child divs, including setting width, height, background color, and flexbox properties.
Flexbox properties are applied to align the child divs with space around using the align-content: space-around; property.
Both WebKit and other browsers are targeted with appropriate prefixes to ensure cross-browser compatibility.

Live Demo:

See the Pen align-content-space-around-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	No	No

Go to Exercise page