为什么在下面的代码中高度div大于img?图像下方有一个间隙,但它似乎不是填充/边距.
图像下方的间隙或额外空间是多少?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}Run Code Online (Sandbox Code Playgroud)
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>Run Code Online (Sandbox Code Playgroud)

当我将我的网站更改为
<!DOCTYPE HTML>
Run Code Online (Sandbox Code Playgroud)
包含在DIV中的每个img元素都具有3px的底部边距,即使该边距未在CSS中定义.换句话说,没有导致3px底部边距的样式属性.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Run Code Online (Sandbox Code Playgroud)
现在让我们说haha.jpg是50x50,并且.placeholder设置为display:table.奇怪的是,我观察的.placeholder的高度尺寸是50x53 ......
有没有人遇到过这种异常并修复过它?
这是JS FIDDLE
以下是该问题的说明(在Firefox和Chrome中测试):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Run Code Online (Sandbox Code Playgroud)
注意蓝色下方的额外red空间.divsvg
已经尝试过设置padding和margin两个元素0,但没有运气.
我刚刚更改了我网站上的标题图片
<div style="background-image... width=1980 height=350>
使用
<img src="... style="width:100%;">
所以图像会缩小它现在所做的...
但现在我有这个神秘的10px差距左右.
我已经检查了Chrome中的检查员,我只是看不出是什么造成了空间.我搜索了其他帖子,但找不到任何适用的内容.
有人知道吗?感谢任何帮助,鲍勃:)
显然 svgs 默认是内联的:
div {
background-color: red;
}
svg {
height: 100px;
background-color: blue;
}Run Code Online (Sandbox Code Playgroud)
<div>
<svg></svg>
</div>
<br>
<div>
<svg style="display:block;"></svg>
</div>Run Code Online (Sandbox Code Playgroud)
display: block在 svg 上设置,它删除了额外的高度。
有谁知道为什么会这样?
我有一个透明的.png图像,我用css更改背景颜色,所以我可以使用不同颜色的相同图像.
这是一个虚拟图像,问题出在Chrome浏览器上,当你放大某些点并在某些类似的智能手机上时,我会在该图像的顶部和底部找到一条线:
这取决于我认为的页面分辨率.Firefox无论如何都无法重现此问题.
有没有人见过这样的东西?怎么解决这个问题?
以下是一个示例,尝试使用Chrome放大或使用智能手机打开它:
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: black;
background-clip: padding-box;
background-clip: content-box;
}
/* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; }Run Code Online (Sandbox Code Playgroud)
<div class="panel-heading">Heading</div>
<div class="panel-body">
<div class="row equal-col-height">
<div class="col-xs-6 text-center">
<img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png">
</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
整个问题实际上是看到元素边缘的背景颜色,就像这里小提琴链接你可以通过打开智能手机上的链接并尝试放大来重现它.背景颜色来自边缘.
Kosh的解决方案解决了这个问题
我有以下代码,它允许红色从一个元素显示.为什么是这样.我原以为a元素只会扩展到内容的大小,但它看起来比它大一点.请参阅此处的codepen http://codepen.io/anon/pen/soqEz.
HTML
<a href="#"><img src="http://placehold.it/150x150" /></a>
Run Code Online (Sandbox Code Playgroud)
CSS
a{
background: red;
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
img {
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
Run Code Online (Sandbox Code Playgroud)
编辑:我看到下面的答案......但任何人都可以解释为什么空间在那里(我的意思是它是块级元素......首先是它的目的是什么)...相反试图摆脱它.谢谢
我正在尝试在figure标签内添加一个图像,但它在图像下留下了一个小的4px空间,这在添加边框时非常明显figure.我无法设置宽度来 figure标记,因为在渲染html时图像的宽度是未知的.