0

I need to fit 5 squares in a rectangle. It seemed easy task at first... 100% is the outer rectangle width, so 20% must be the width of each square, including borders and setting margins to 0.

However the browser seems to insert "something" in between the squares, but the inspector shows no margins... and I can fit only 4...

Here is my test code:

<div class="wr">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

and the corresponding CSS:

.wr {
  min-width: 5rem;
  max-width: 5rem;
  width: 5rem;
  min-height: 1rem;
  max-height: 1rem;
  height: 1rem;
  border: 1px solid black;
}

.b {
  display: inline-block;
  min-width: 20%;
  max-width: 20%;
  min-height: 100%;
  background-color: red;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

https://jsfiddle.net/lucrus/6Lzy45va/7/

What am I missing?

Lucio Crusca
  • 1,277
  • 3
  • 15
  • 41
  • 1
    From the answer above, the spaces & line breaks in your HTML code creates the margins. You can either rewrite your HTML so that there are no characters between the tags, or set the font-size of the container to 0. – skyline3000 Jul 27 '21 at 16:57
  • This will probably help you, https://stackoverflow.com/a/16679004/5223447 – Alexander Lallier Jul 27 '21 at 17:01

0 Answers0