html - CSS "vertical-align: top"用于删除内联元素下方的底部空间 - 它是如何工作的?

标签 html css

我知道浏览器会在内联元素下方添加一些额外的空间。用于容纳 j、q、y 等字符的“尾部”。

摆脱该空间的一种可能性是向特定元素添加“vertical-align: top”属性:

figure img {
    vertical-align: top;
}

它有效。我试过了。

但我不明白它的如何为什么会起作用。

我希望图形容器保持其大小,并将 img 放在图形容器的最顶部。

为什么要折叠容器?

有人能给我解释一下这里用来移除不需要的底部空间的行为吗?

最佳答案

'vertical-align' 不影响寻址元素的对齐方式。 'vertical-align' 指定内联元素应如何围绕内联元素运行。 我认为借助背景知识,您还可以解释进一步的行为。

我提前为我的英语知识道歉。 :P

关于html - CSS "vertical-align: top"用于删除内联元素下方的底部空间 - 它是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39955177/

相关文章:

html - 允许父 div 被一些 child 拉伸(stretch),但不能被其他 child 拉伸(stretch)

javascript - 如何避免使用 Backbone 提交表单时的 GET 请求

css - 如何在CSS中制作一个 flex 的边缘容器

html - 使用 CSS 在进度条上显示进度条的值(数字),例如 55%

css - 选择 <option></option> 标签内的内容

javascript - 添加 AOS JS 库后,我的自定义 CSS 过渡动画在悬停时不起作用

css - 使用 display-inline 集中一个 div 并受 float 影响

javascript - 验证动态添加的表单输入 - Vanilla JS

jquery - 找到显示为 : block 的最后一个可见 div

html - HTML 中 URL 的正则表达式匹配