html - Why are these inline-block elements keeping whitespace on top and bottom?

Question

I have a container div, with many children divs in it. I'd like the children divs to show next to each other and to wrap when the width of the container is not enough, so as to make a grid.

The container has fixed width and height, and so does the children divs. Those are set to display: inline-block, and they wrap as expected. However, a whitespace is displayed on the top and bottom of the children divs:

The code is as follows:

.container {
    border: 1px solid #000000;
    margin: 0 auto;
}

.child {
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid #EEEEEE;
}

...

<div class="container">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
   ...
</div>

The rendered output is like so:

I'd like them to stick next to each other vertically as well.

How can I accomplish this with CSS, without changing the DOM?

question from:https://stackoverflow.com/questions/65923860/why-are-these-inline-block-elements-keeping-whitespace-on-top-and-bottom

Answer 1

The extra vertical spacing is caused by the line height (space that the browser is reserving for leading between rows of text). You can remove it by adding line-height: 0 to your .container rules.

.container {
    border: 1px solid #000000;
    margin: 0 auto;
    line-height: 0;
}

.child {
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid #EEEEEE;
}

<div class="container">
   <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 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 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 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 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 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 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 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 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 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>