Menu
I'm getting some sort of padding below an img tag in my webpage. The html looks like:
<li> <div>Title</div> <img src='...' width='60px' height='60px' /> </li> Yeah so there is about 5 pixels of padding beneath the image (I can tell because the bg color of the parent li item is different). I tried assigning a class to the img tag with padding/margin/border all set to zero, but no change. I'm wondering if there's anything I'm missing about img tags that could be causing this padding to appear?
When I remove the img tag, and just leave the 'title' div, the extra padding is gone,
Thanks
------------- Update -------------------
This is only happening on FF, chrome and safari look ok. Firebug also shows the padding is part of the img element.
494
Add space below a line or paragraph of text To add extra space below a line or paragraph of text, or push text down lower on the page once, you can use the <br> tag. Below is an example of how this technique can be applied. The code above creates the text shown below. This sentence contains example text.
Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
