0

.square {
    width: 3em;
    height: 3em;
    background-color: black;
    display: inline-block;
}

* {
    margin: 0;
    padding: 0;
    border: 0;

}
<div><!--
    --><div class="square"></div><div class="square"></div><!--
--></div><!--
--><div><!--
    --><div class="square"></div><div class="square"></div><!--
--></div>

Expected behavior: the lower two squares are located directly below the upper two squares, visually forming one big square

Actual behavior: for some unknown to me reason the parent divs each have an extra line below their contents, resulting into a gap between two upper and two lower squares

enter image description here

kandi
  • 1,098
  • 2
  • 12
  • 24
  • its the `inline decender height` for letters like: `j`, `y`, `g`and `p`. Use `display: block;` instead and it will be gone. – tacoshy Jun 05 '21 at 10:18
  • @tacoshy unfortunately, 'display: block;' doesn't work here because it places squares one under another and not one right to another like in my example – kandi Jun 05 '21 at 10:23
  • of course it will work. Those squares are wrapped. So you can either use the `float-hack` or use `display: flex;` on the wrapper to align them next to each other. Alternativly you could align the 4 squares to a bigger square with the use of CSS-Grid. You have enough solutions to solve this, you just picked the wrong approach. – tacoshy Jun 05 '21 at 10:26
  • @tacoshy actually your comment gave me an idea to fight the problem with 'line-height:0;', thanks – kandi Jun 05 '21 at 10:27
  • you have to use vertical-align:top (read the duplicate please), line-height, float, etc are all hacks – Temani Afif Jun 05 '21 at 10:27

0 Answers0