1

I have a board of 3 blocks each consisting of a grid of 25 squares containing images. The 25 squares are 40x40px in size with a 2px margin for a total of 44x5 = 220px x 220px. Each square will have 5px above and 5px below.

If I instead modify the first block to contain only a single 220px x 220px square containing a 220x220px image it adds some space below this square and above the next two squares.

So, the first square will have 7px below it instead of 5 and the remaining two squares will have 7px above them instead of 5. I cannot figure out where this extra spacing is coming from.

At first I thought that maybe it has something to do with using inline-blocks, but I have tried a number of different 'hacks' including setting the font-size to 0, but nothing I have tried seems to fix this.

Even if I put all the HTML code on a single line with no spaces the extra space still shows up.

Below is my code. If you run it (preferably in full screen) and look very closely at the pink box, you will notice that it does not line up exactly with the other boxes. It adds 2px below the pink box and 2px above each of the other two boxes. Where is this extra space coming from and how can I fix it?

As shown in other SO pages inline images (and therefore inline blocks) have a space under them. Changing the small images to display: block fixes the problem, however it is unclear to me why this change fixes it. When the pixels are measured there seems to be no white space added under the images in the first place. The only extra space seems to be appearing outside of the outer 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='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

<div>Board #2:</div>

<div class="board">
<div class='block'><div class='large_square'><div class='image220'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>
Community
  • 1
  • 1
kojow7
  • 10,308
  • 17
  • 80
  • 135
  • 1
    Possible duplicate of [Image inside div has extra space below the image](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – Vivekraj K R Feb 18 '16 at 05:44

5 Answers5

1

Adding overflow: hidden or vertical-align: top to block get you closer. still looking at the extra space under the small squares

thedarklord47
  • 3,183
  • 3
  • 26
  • 55
  • 1
    The small squares do have a margin of 2px. However, square (40x40) combined with margins, create a square of 44px x 44px. Since there is a 5 x 5 grid, in total with margins included this will create a 220px x 220px area. The large_square is exactly 220px x 220px so having a margin of 0px should take up the same area. I am using firefox and have tried to Inspect with both the Firefox Inspector and with Firebug. Both show the box model, but neither indicate where the extra 2px are coming from. – kojow7 Feb 18 '16 at 04:13
  • Okay, that seems to work, but what is overflowing when they are both 220px in size? – kojow7 Feb 18 '16 at 04:36
  • not sure but `vertical-align: top` on `block` also works and makes more sense – thedarklord47 Feb 18 '16 at 04:38
  • honestly I have no idea what is causing that extra space under the 5x5's. this is really strange. your math is right and there are no spaces in your markup to cause inline spaces to be rendered anyway. I'll keep looking – thedarklord47 Feb 18 '16 at 04:43
  • Yes, even if I put everything in the body on a single line I still have the issue. It is really bizarre. Thank you for your help! – kojow7 Feb 18 '16 at 04:49
1

The reason for this extra space is that the browser is rendering whitespace between the inline-block elements. There are a number of solutions, such as commenting out or removing whitespace or using alternatives to display:inline-block; such as float:left; (which would require the parent element to have overflow:auto;.

.board {
        background-color: #05a;
        font-size: 0;
        overflow:auto;
}

.block {
        padding: 5px;
        border: inset #000  1px;
        display: inline-block;
        float:left;
        width: 220px;
        height: 220px;
        margin: 5px;
        font-size: 0;
        background-color: green;
        overflow:auto;
}

.square {
        margin: 2px;
        width: 40px;
        height: 40px;
        float:left;
        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='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

<div>Board #2:</div>

<div class="board">
<div class='block'><div class='large_square'><div class='image220'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

<div class='block'><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div><div class='square'><div class='image40'></div></div></div>

</div>

A more comprehensive list of solutions is given as answers to another question.

Community
  • 1
  • 1
Andrew
  • 1,322
  • 14
  • 20
  • 1
    OP said they already tried many of the `inline-block` whitespace fixes – thedarklord47 Feb 18 '16 at 04:34
  • I just added a working example implementing the `float` property. – Andrew Feb 18 '16 at 04:56
  • nah look at the extra green space under the 5x5 grid of white squares. thats what OP is saying about 5x44=220, but the squares don't line up. The green "padding" on the bottom is thicker than anywhere else on the block and we can't figure out why. getting the `block`s to line up is only part of the question and can be quickly solved by `vertical-align: top` on `block` – thedarklord47 Feb 18 '16 at 04:58
  • No there was an issue with the parent element's size being 1 or 2 pixels too large. See the OP's snippet. The distance between the parent (`.block`) and the child (`.square`) is accounted for by `5px` of `padding` on `.block` and `2px` `margin` on `.square`. If the OP wants that aligned too, then they need to reduce `.large_square`'s `width` and `height` to `216px` and set its `padding:2px;`. – Andrew Feb 18 '16 at 05:04
  • Actually, this does indeed solve the issue, but any idea where the extra space was coming from with the inline-block method even if the entire HTML code was contained on a single line with no whitespace? – kojow7 Feb 18 '16 at 05:06
  • lol I'm so confused... the snippet in your answer still looks broken on my screen. does SO snippet do any wonky scaling that could make things look off? After copying the code to jsFiddle everything looks correct. – thedarklord47 Feb 18 '16 at 05:11
  • @kojow7 I'm not sure. It is possible that some non-visible whitespace remained (which sometimes occurs when there are character-encoding incompatibilities), or it's possible that there was a browser incompatibility, but those are just guesses. – Andrew Feb 18 '16 at 05:16
  • @thedarklord47 There should be a slight difference in the green padding which is what I want. The issue is in the blue area. It is still unclear where this mystery space is coming from. The SO snippet looks fine in my browser. – kojow7 Feb 18 '16 at 05:17
  • Is it necessary to have `overflow: auto` here? It seems to work even if I remove this. – kojow7 Feb 18 '16 at 05:23
0

Add vertical-align:top on block

.block {
    background-color: green;
    border: 1px inset #000;
    display: inline-block;
    font-size: 0;
    height: 220px;
    margin: 5px;
    padding: 5px;
    vertical-align: top;
    width: 220px;
}
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
  • But do you know what is causing this white space to happen in the first place? Even if I put everything inside the body on a single line it still has this problem. – kojow7 Feb 18 '16 at 04:50
0

Please try changing img to block level element.

.image40 {
 width: 40px;
 height: 40px;
 display: block;
 background-color: white;
 font-size: 0;
  }
Vivekraj K R
  • 2,418
  • 2
  • 19
  • 38
  • This works, but why? Also, I simplified my code a bit to paste into Stack Overflow. The original one used an actual element rather than a div with .image40 so by default it is an inline element. I have changed the small images to display as a block and it works. But why is this working and where did the extra space come from in the first place? – kojow7 Feb 18 '16 at 05:38
  • 1
    An image is render like a text. and there is a space below each texts. for further clarification you can visit http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image – Vivekraj K R Feb 18 '16 at 05:41
  • So why is the whitespace issue showing up outside of the block rather than outside the images? – kojow7 Feb 18 '16 at 05:57
  • Its just below the image. – Vivekraj K R Feb 18 '16 at 05:58
  • But the white space is showing up below the first .block and above the second and third .block. – kojow7 Feb 18 '16 at 06:00
  • try giving a border to the block. you can figure it out yourself. – Vivekraj K R Feb 18 '16 at 06:02
  • As you see in my code I have already placed a border around the block. I have also tried placing a border around the image and around the square. But the only extra space that is showing up in the blue area outside of the .block element. – kojow7 Feb 18 '16 at 06:17
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103798/discussion-between-vivek-raj-and-kojow7). – Vivekraj K R Feb 18 '16 at 06:46
0

replace with below css which may solve the issue and there is no issue with html

.large_square {
    margin: 0px;
    width: 220px;
    height: 218px;
    background-color: yellow;
    display: inline-block;
    font-size: 0;
    clear: both;
}
.image220 {
    width: 220px;
    height: 218px;
    display: inline-block;
    background-color: pink;
    font-size: 0;
    clear: both;
}
Iqbal Pasha
  • 1,318
  • 1
  • 8
  • 12
  • As my images are 220 x 220 pixels in size, obviously, this is not the solution I am looking for. – kojow7 Feb 23 '16 at 01:49