Welcome to WebmasterWorld Guest from 3.80.6.254

Forum Moderators: not2easy

Message Too Old, No Replies

Padding Bigger on Bottom

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

Junior Member

10+ Year Member

joined:Oct 4, 2004
posts:136
votes: 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.
6:11 am on Dec 13, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15928
votes: 884


-- 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?
9:43 am on Dec 13, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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.
4:51 am on Dec 17, 2014 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 4, 2004
posts:136
votes: 0


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

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