Vertical spacing between DIVs-CodePudding

I have some extra vertical spacing between the rows of my 3x3 grid of DIVs and I don't know why. Can somebody help me out here:

.tinybox {
  width: 5px;
  height: 5px;
  border: solid 1px #999;
  padding: 0;
  margin: 1px;
  float: left;
}

<div ></div>
<div ></div>
<div ></div>
<br style="clear:both" />
<div ></div>
<div ></div>
<div ></div>
<br style="clear:both" />
<div ></div>
<div ></div>
<div ></div>
<br style="clear:both" />

I have tried line-height, but that does nothing.

CodePudding user response：

Clear float without br

.tinybox {
  width: 5px;
  height: 5px;
  border: solid 1px #999;
  padding: 0;
  margin: 1px;
  float: left;
}

.tinybox:nth-child(3n   1) {
  clear:both;
}

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

You can use display:grid to create similar layout, and use grid-column-gap and grid-row-gap to control the gap / spacing more easier.

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height:300px;
  width:300px;
}

.child{
 border:1px solid #ccc;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
<div>