CODEWITHSUNDEEP
css
Graham
Graham

Reputation: 8181

Vertical spacing between DIVs

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 class="tinybox"></div>
<div class="tinybox"></div>
<div class="tinybox"></div>
<br style="clear:both" />
<div class="tinybox"></div>
<div class="tinybox"></div>
<div class="tinybox"></div>
<br style="clear:both" />
<div class="tinybox"></div>
<div class="tinybox"></div>
<div class="tinybox"></div>
<br style="clear:both" />

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

Upvotes: 0

Views: 615

Answers (2)

FeelRightz
FeelRightz

Reputation: 2999

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 class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
<div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274024

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

Upvotes: 1

Related Questions