-3

I have a big square div I need to show 4 small squares inside it separated in 2 rows i do it like this

* {
  margin: 0;
  padding: 0;
}

#main {
  max-width: 100px;
  min-height: 100px;
  background-color: lightblue;
}

#main>div>div {
  width: 46px;
  min-height: 50px;
  border: 1px solid black;
  display: inline-block;
  background-color: green;
}
<div id="main">
  <div class="line">
    <div>1</div>
    <div>2</div>
  </div>
  <div class="line">
    <div>3</div>
    <div>4</div>
  </div>
</div>

https://codepen.io/dimoff66/pen/oNNLYjx?editors=0111

but i cant get what is the nature of space between 1 and 2, and between 3 and 4 if i make width of small square more they shift to the next line

Thanx in advance

giuseppedeponte
  • 2,366
  • 1
  • 9
  • 19
Dmitry Reutov
  • 2,995
  • 1
  • 5
  • 20

1 Answers1

0

The space is due to your display:inline-block property that reads the newline between the two inner divs as a space.

Just remove the newline (like this <div>1</div><div>2</div>) and you will be fine.

* {
  margin: 0;
  padding: 0;
}

#main {
  max-width: 100px;
  min-height: 100px;
  background-color: lightblue;
}

#main>div>div {
  width: 48px;
  /** 48px + 1px + 1px = 50px */
  border: 1px solid black;
  min-height: 48px;
  display: inline-block;
  background-color: green;
}
<div id="main">
  <div class="line">
    <div>1</div><div>2</div>
  </div>
  <div class="line">
    <div>3</div><div>4</div>
  </div>
</div>
giuseppedeponte
  • 2,366
  • 1
  • 9
  • 19