Padding Bigger on Bottom

Forum Moderators: not2easy

Message Too Old, No Replies

Padding Bigger on Bottom

Emperor

5:33 am on Dec 13, 2014 (gmt 0)

Hi guys, I tried a few things and I just can't get my top and bottom padding to be the same, the bottom is always thicker than it should be.


div.box {
 background-color: #800000;
 padding: 24px 0;
}

<div class="box">
<img src="..." width="128" height="128" ...>
</div>

The only way I can get it right is if I set the box height explicitly to 128px but if I have more than one image side by side (which I do) it will mess up the flow when I shrink the window.

In my case the bottom is 4px bigger so I can set the div.box padding-bottom to 20px but I don't really like that method because I'll bet it's not 4px in everyone's browser.

I tried putting the HTML all on one line, it didn't do anything different. I tested in Firefox and IE. I coded for HTML5.

Thanks.

lucy24

6:11 am on Dec 13, 2014 (gmt 0)

-- double-check that the <img> element has no padding or margins (it shouldn't, but check anyway)
-- try setting the line-height for your .box element to some explicit value in pixels. You can now set the top and bottom padding to different numbers if needed, because you've overridden browser preferences.

Can I assume you've already verified that the problem is in the padding (internal to the element) rather than in margins (external to the element), for example by setting a for-testing-only border or background?

Paul_o_b

9:43 am on Dec 13, 2014 (gmt 0)

Hi,

Images are placed by default on the baseline (just like text so that there is room below for descenders). You can set the alignment to bottom which should cure the gap.

.box img{vertical-align:bottom}

Floating the image or setting the image to display:block will also have the same effect but of course change how the image behaves.

Emperor

4:51 am on Dec 17, 2014 (gmt 0)

Hi guys, I did what Paul showed and it works perfectly now.

It was really bugging me. Thanks for the great explanation.