I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below it.
Now, if I decide to change the first block to just one large square measuring 220px x 220px which contains a single image of the same dimensions, there appears to be extra space added below this square and above the other two squares.
The first square now has 7px below it instead of the original 5px, while the remaining two squares have 7px above them instead of 5px. I've tried various methods including setting font-size to 0 to resolve this spacing issue with no success.
Even when I place all the HTML code on a single line without any spaces, the additional space persists.
Below is my code. When you run it in full screen mode and pay close attention to the pink box, you will notice that it does not align perfectly with the rest of the boxes. There seems to be an extra 2px gap below the pink box and 2px above each of the other two boxes. Where is this unwanted space coming from and how can it be rectified?
It has been observed in other related Stack Overflow threads that inline images (and by extension, inline blocks) tend to have space underneath them by default. Changing these small images to display as blocks solves the problem, but the reason behind this fix remains unclear. Measurements reveal no white space beneath the images initially. The excess spacing seems to be generated outside of the outermost blocks.
.board {
background-color: #05a;
font-size: 0;
}
.block {
padding: 5px;
border: inset #000 1px;
display: inline-block;
width: 220px;
height: 220px;
margin: 5px;
font-size: 0;
background-color: green;
}
.square {
margin: 2px;
width: 40px;
height: 40px;
background-color: yellow;
display: inline-block;
font-size: 0;
}
.image40 {
width: 40px;
height: 40px;
display: inline-block;
background-color: white;
font-size: 0;
}
.large_square {
margin: 0px;
width: 220px;
height: 220px;
background-color: yellow;
display: inline-block;
font-size: 0;
}
.image220 {
width: 220px;
height: 220px;
display: inline-block;
background-color: pink;
font-size: 0;<div>Board #1:</div>
<div class="board">
<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div>< ...
<div class="block"><div class="large_square"><div class="image220"></div></div></div>
<div class="block"><div class="square"><div class="image40"></div></div>< ...