I am facing an issue with a parent div that contains multiple children. I want to add spacing between the children by applying margins, but this also creates unwanted space between the parent and the children. Is there a clean solution to remove this space?
If I ignore size constraints and the dynamic number of children, I could manually set certain margins to 0 to achieve the desired result, but this feels like a workaround.
It seems like this should be a common problem, so I'm hoping there is a straightforward CSS property that I am not familiar with.
Below is an example illustrating the scenario mentioned:
.parent {
height:100%;
width:100%;
display: flex;
font-size: 0;
flex-wrap:wrap;
border: 1px solid black;
}
.child {
display: inline-block;
background:blue;
margin:0 12px 0;
flex-grow: 0;
width:100px;
height:100px;
margin:10px;
}<body>
<div class="parent">
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
</div>
</body>