Html div内的图像在图像下方有额外的空间
为什么Html div内的图像在图像下方有额外的空间,html,css,image,Html,Css,Image,为什么div的高度大于img的高度?图像下方有一个间隙,但似乎不是填充/边距 图像下方的间隙或额外空间是多少? #包装器{ 边框:1px纯红; 宽度:200px; } img{ 宽度:200px; } 默认情况下,图像以内联方式呈现,就像字母一样,因此它与a、b、c和d位于同一行上 在这一行下面有一个空格,你可以在字母g,j,p和q上找到 你可以: 调整图像的位置,使其位于其他位置(例如,中间位置),或 更改显示,使其不内联 div{ 边框:纯黑1px; 边缘底部:10px; } #对
div
的高度大于img
的高度?图像下方有一个间隙,但似乎不是填充/边距
图像下方的间隙或额外空间是多少?
#包装器{
边框:1px纯红;
宽度:200px;
}
img{
宽度:200px;
}
默认情况下,图像以内联方式呈现,就像字母一样,因此它与a、b、c和d位于同一行上 在这一行下面有一个空格,你可以在字母g,j,p和q上找到 你可以:
- 调整图像的位置,使其位于其他位置(例如,
),或中间位置
- 更改
,使其不内联显示
div{
边框:纯黑1px;
边缘底部:10px;
}
#对齐中间img{
垂直对齐:中间对齐;
}
#对齐基础img{
垂直对齐:底部对齐;
}
#显示img{
显示:块;
}
违约
敏捷的棕色狐狸跳过了懒狗
垂直对齐:中间对齐
敏捷的棕色狐狸跳过了懒狗
垂直对齐:底部对齐
敏捷的棕色狐狸跳过了懒狗
显示:块
敏捷的棕色狐狸跳过了懒狗
本文建议的另一个选项是将图像的样式设置为style=“display:block;”
也可以将父图像的线条高度置零:
#wrapper {
line-height: 0;
}
所有修复:我刚刚在div中添加了
float:left
,它工作了我使用了行高:0
,对我来说效果很好。我发现使用display:block时效果很好;在图像上垂直对齐:顶部;在文本上
.imagebox{
宽度:200px;
浮动:左;
高度:88px;
位置:相对位置;
背景色:#999;
}
.集装箱{
宽度:600px;
高度:176像素;
背景色:#666;
位置:相对位置;
溢出:隐藏;
}
.文本{
颜色:#000;
字体大小:11px;
字体系列:robotomeduim,无衬线;
垂直对齐:顶部;
}
.imagebox img{display:block;}
图像标题
图像标题
图像标题
图像标题
图像标题
图像标题
快速修复:
要消除图像下方的间隙,您可以:
- 将图像属性设置为
垂直对齐:底部代码>
垂直对齐:顶部代码>或
垂直对齐:中间代码>
- 将图像的显示属性设置为
display:block代码>
#有效img{
垂直对齐:底部对齐;
}
#块式img{
显示:块;
}
div{边框:1px实心红色;宽度:100px;}
img{宽度:100px;}
无修复程序:
与垂直对齐:底部;关于图像:
带显示:块;关于图像:
您只需分配此属性:
img {
display: block;
}
img {
display: inline;
}
默认情况下,图像具有以下属性:
img {
display: block;
}
img {
display: inline;
}
您可以使用以下几种方法解决此问题:
行高
#包装{行高:0px;}
display:flex
#包装器{display:flex;}
#包装器{display:inline flex;}
显示:
块
,表
,flex
和继承
#包装器img{display:block;}
#包装器img{display:table;}
#包装器img{display:flex;}
#包装器img{display:inherit;}
谢谢这也解决了flash电影下的空间问题。(添加了显示:嵌入块/对象标记)或
内联块
,如果您仍然希望它像通常的图像那样内联显示。@Ian@commerce内联块
似乎不起作用。警告!这还将杀死#包装器中的所有文本节点。因为它将被继承。但对那个了不起的小提琴手来说,还有额外的积分!在这里,它使用文本节点进行更新。或者,字体大小:0更准确地说,b/c内联元素会占用其当前行高度的空间。将行高
设置为所需的尺寸也会克服不需要的空白。“f”是否符合下降者的条件?@j08691-取决于字体。请注意,如果使用的是垂直对齐:底部
或中间
,如果图像较小(小于行高),你可能会看到神秘空间出现在图像上方。减少测试用例:这是因为设置float:left
会导致display:block
,所以将字体大小设置为0不起作用。还是真的?@Persijn是的。如设置行高:0代码>但是我不认为这是一个很好的解决方案,与改变垂直对齐或显示属性的注释相比,但是,有些浏览器不尊重<代码>字体大小:0 < /代码>:它们将字体大小设置为用户设置中的最小大小。是的,它看起来像是白色的空间。我认为图片中的中间文本顶部子超级位置不正确。关于这个问题,这里有一个很好的解释:抱歉,-1:这会搞乱文本定位,所以如果有人在图像旁边放置一些文本(特别是多行,比如带有
)文本,他们会有一个错位,重叠/悬垂混乱。请不要推荐非常草率的行高度破解,或者至少要说明为什么这是最糟糕的“解决方案”:当有人将文本放在图像旁边时(尤其是带有BR标记的预格式化多行),他们会发现自己的处境比开始时更糟糕。这在所有解决方案中对我帮助最大。然而,我的环绕div现在扩展到了主题图像之外,以前在div中显示inline block修复了这个问题。泰