作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
为什么在following code中div
的高度大于img
的高度?图像下方有一个缝隙,但似乎不是填充/边距。
图像下方的间隙或多余空间是多少?
#wrapper {
border: 1px solid red;
width:200px;
}
img {
width:200px;
}
<div id="wrapper">
<img src="http://i.imgur.com/RECDV24.jpg" />
</div>
最佳答案
默认情况下,图像以字母形式内联呈现,因此它位于a,b,c和d所在的同一行上。
在该行下的descenders处有空格,您可以找到g,j,p和q之类的字母。
您可以:
调整图像的vertical-align
以将其放置在其他位置(例如middle
)或
更改display
,使其不是内联的。
div {
border: solid black 1px;
margin-bottom: 10px;
}
#align-middle img {
vertical-align: middle;
}
#align-base img {
vertical-align: bottom;
}
#display img {
display: block;
}
<div id="default">
<h1>Default</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
<div id="align-middle">
<h1>vertical-align: middle</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="align-base">
<h1>vertical-align: bottom</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display">
<h1>display: block</h1>
The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>
关于html - div中的图像在图像下方有多余的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55804585/
我的服务层有如下方法 public ModuleResponse GetModules(ModuleRequest request) { var response = new ModuleRe
我构建的工具栏与大多数工具栏一样,minHeight 设置为 actionBarSize: 但是,如果我删除这个属性,就完全没有区别了。工具栏保持其 actionBarSize,即使我删除菜单并将
我已经为 SVG 和剪辑路径苦苦挣扎了一段时间。 我正在尝试创建一个三 Angular 形剪辑路径,它将覆盖照片以给顶部一个“三 Angular 形”边缘。 我试图实现与照片完全相同的效果,但三 An
我有一个带有 2 个索引的 PostgreSQL 表。其中一个索引涵盖了 website_id 和 tweet_id 列,是一个唯一的 B 树索引。第二个索引只覆盖 website_id 列,是一个非
我是一名优秀的程序员,十分优秀!