HTML 5 strange img always adds 3px margin at botto

2019-01-02 17:26发布

站内问答 / HTML/CSS
1500 10 5

When I change my website to 

<!DOCTYPE HTML>

Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...

Has anyone encountered this anomaly before and fixed it?

EDIT

Here is the JS FIDDLE

http://jsfiddle.net/fRpK6/

标签： css html5
举报
10条回答
有味是清欢
2楼-- · 2019-01-02 17:57

apply display: block to the image fix it, i have this issue with images inside floated divs.

查看更多
0人赞 添加讨论(0) 举报
忆尘夕之涩
3楼-- · 2019-01-02 18:00

it is solved my problem.

line-height: 0;
查看更多
0人赞 添加讨论(0) 举报
零度萤火
4楼-- · 2019-01-02 18:00

I believe setting 

line-height: 1;

on the image will also fix this problem, especially if it's in a block by itself.

查看更多
0人赞 添加讨论(0) 举报
墨雨无痕
5楼-- · 2019-01-02 18:00

For me it was a combination of

font-size: 0px;
line-height: 0;

on the wrapping container that fixed it.

查看更多
0人赞 添加讨论(0) 举报
长期被迫恋爱
6楼-- · 2019-01-02 18:02

I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;

.placeholder {
    font-size: 0px;
}
查看更多
0人赞 添加讨论(0) 举报
呛了眼睛熬了心
7楼-- · 2019-01-02 18:02

It also happens with piled up divs, just add float property. Example:

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

Problematic CSS:

.piledUpDiv{
    width:100%;
    display:inline-block;   
 }

Solution:

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)