开发者

Extra padding under an <img> tag?

开发者 https://www.devze.com 2023-01-05 08:39 出处:网络
I\'m getting some sort of padding below an img tag in my webpage. The html looks like: <li> <div>Title</div>

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.


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.


Just add height attribute to image in style tag, like if you need a thin line then 1px needs to be specified externally for safari.


I think you might be seeing the space after your image before the end of the list item. Try getting rid of the whitespace in your html, like this:

<li><div>Title</div><img src='...' width='60px' height='60px' /></li>


What if you force the padding margin and border to 0 on img elements? Are you working with Firebug?


You could provide a link or more code to allow a better resolution of your problem, but:

1. Verify if your image is 60px by 60px as setup in your img tag

2. Remove padding and margin and border from your img, you may have a default setting for img tag that causes what you're refereeing

3. The extra space under your img may come from other elements in your page, meaning that with the img in place, some element forces that extra space

0

精彩评论

暂无评论...
验证码 换一张
取 消