blocks|key|557440|text|此问题是由于图像的行为类似于文本字符引起的(因此在图像下方的"y“或"g”挂起部分留下一个空格)，并通过使用vertical-align+CSS属性指示不需要此类空格来解决此问题。几乎任何值的vertical-align都可以；就我个人而言，我喜欢middle。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557441|img+{
++++vertical-align:+middle;
}|code-block|syntax|javascript|557442|jsFiddle：http://jsfiddle.net/fRpK6/1/|557443|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fRpK6/1/^0|1I|E|2O|E|3G|6|0|0|9|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the <code>vertical-align</code> CSS property to indicate that no such space is needed. Almost any value of <code>vertical-align</code> will do; I'm fond of <code>middle</code>, personally.

<pre><code>img {
 vertical-align: middle;
}
</code></pre>

jsFiddle: <a href="http://jsfiddle.net/fRpK6/1/" rel="noreferrer">http://jsfiddle.net/fRpK6/1/</a>

blocks|key|557487|text|我经常通过适当地赋予图像元素display:block或display:inline-block来解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557488|entityMap^0|E|D|S|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I often solve this by giving the image element <code>display:block</code> or <code>display:inline-block</code> as appropriate.

blocks|key|341566|text|它解决了我的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341567|line-height:+0;|code-block|syntax|javascript|341568|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

it is solved my problem.

<pre><code>line-height: 0;
</code></pre>

blocks|key|557575|text|我相信设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557576|line-height:+1;|code-block|syntax|javascript|557577|也可以解决这个问题，特别是当它自己在一个块中的时候。|557578|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I believe setting 

<pre><code>line-height: 1;
</code></pre>

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

blocks|key|341750|text|将display:+block应用于图像修复它，我在浮动div中的图像有这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|341751|entityMap^0|1|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|557352|text|我不确定发生这种情况的确切原因，但给你的占位符div+font-size:+0px；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557353|.placeholder+{
++++font-size:+0px;
}|code-block|syntax|javascript|557354|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>.placeholder {
 font-size: 0px;
}
</code></pre>

blocks|key|341783|text|也许是空白的问题导致了这一点。因此，下面的方法可能会有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|341784|img+{
display:+block;|code-block|syntax|javascript|341785|}或|341786|img+{
vertical-align:+top/middle/...;|341787|}|341788|或|341789|.placeholder+{
font-size:+0;|341790|341791|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|X|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Y|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|Q|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

maybe it is the problem of the white-space that causes this.
so, the methods bellow maybe useful

<pre><code>img {
display: block;
</code></pre>

}
or

<pre><code>img {
vertical-align: top/middle/...;
</code></pre>

}

or

<pre><code>.placeholder {
font-size: 0;
</code></pre>

}

blocks|key|557898|text|对我来说，这是一种|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557899|font-size:+0px;
line-height:+0;|code-block|syntax|javascript|557900|在固定它的包装容器上。|557901|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For me it was a combination of

<pre><code>font-size: 0px;
line-height: 0;
</code></pre>

on the wrapping container that fixed it.

blocks|key|557536|text|不知道确切的问题是什么，但我已经尝试了2个不同的选项，首先在img标签上应用类，然后应用字体大小0+px；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557537|http://jsfiddle.net/fRpK6/3/|offset|length|557538|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;

<a href="http://jsfiddle.net/fRpK6/3/" rel="nofollow">http://jsfiddle.net/fRpK6/3/</a>

blocks|key|557648|text|堆积divs也会发生这种情况，只需添加float属性即可。示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|557649|<body>
++<div+class="piledUpDiv">Some+text</div>
++<div+class="piledUpDiv">Some+text</div>
++<div+class="piledUpDiv">Some+text</div>
</body>|code-block|syntax|javascript|557650|有问题的CSS：|557651|.piledUpDiv{
++++width:100%25;
++++display:inline-block;+++
+}|557652|解决方案：|557653|.piledUpDiv{
++++width:100%25;
++++display:inline-block;
++++float:left;+
+}|557654|entityMap^0|2|4|J|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

It also happens with piled up <code>divs</code>, just add <code>float</code> property.
Example:

<pre><code>&lt;body&gt;
 &lt;div class="piledUpDiv"&gt;Some text&lt;/div&gt;
 &lt;div class="piledUpDiv"&gt;Some text&lt;/div&gt;
 &lt;div class="piledUpDiv"&gt;Some text&lt;/div&gt;
&lt;/body&gt;
</code></pre>

Problematic CSS:

<pre><code>.piledUpDiv{
 width:100%;
 display:inline-block; 
 }
</code></pre>

Solution:

<pre><code>.piledUpDiv{
 width:100%;
 display:inline-block;
 float:left; 
 }
</code></pre>

blocks|key|557974|text|在我的特殊情况下，上述解决方案都不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557975|我和display:+flex;一起做了一个包装div。|offset|length|style|CODE|557976|我设法通过将：align-items:+flex-start;添加到包装div和所有图像：display:+block;来实现这一点。|557977|在我显式地告诉内容要对齐之前，我把布局搞乱了。在将其设置为flex-start之后，一切工作起来都很棒。|557978|entityMap^0|0|2|E|O|3|0|7|O|19|F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]|$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|M|$]]

In my special case none of the above solutions worked.

I had a wrapping <code>div</code> with <code>display: flex;</code>.

I managed to make this working by adding: <code>align-items: flex-start;</code> to the wrapping div AND to all the images: <code>display: block;</code>.

Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.

When I change my website to
<pre><code>&lt;!DOCTYPE HTML&gt;
</code></pre>
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.
<pre><code>&lt;div class=&quot;placeholder&quot;&gt;
 &lt;img alt=&quot;&quot; src=&quot;/haha.jpg&quot; /&gt;
&lt;/div&gt;
</code></pre>
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?
<h1>EDIT</h1>
Here is the JS FIDDLE
<a href="http://jsfiddle.net/fRpK6/" rel="noreferrer">http://jsfiddle.net/fRpK6/</a>

HTML 5 strange img always adds 3px margin at bottom

容器

当我将我的网站更改为<!DOCTYPE HTML>包装在DIV中的每个img元素都有一个3px的底边距，即使该边距在CSS中没有定义。换句话说，没有样式属性导致3px的下边距。<div class="placeholder"> <img alt="" src="/haha.jpg" /></div>现在假设haha.jpg为50x50，并将.placeholder设置为display: ta

问HTML 5奇怪的img总是在底部增加3px的页边距
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML 5奇怪的img总是在底部增加3px的页边距EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML 5奇怪的img总是在底部增加3px的页边距
EN