【问题标题】:Why does the img tag accept the margin-top property?为什么 img 标签接受 margin-top 属性?
【发布时间】:2020-05-22 23:21:40
【问题描述】:

我想知道为什么img 标签接受 margin top 属性? 这不是内联标签吗?并且内联标签不接受顶部和底部边距?

【问题讨论】:

  • @ashishsingh 不需要代码或 sn-p。上述问题很清楚
  • 以英语为母语的我并不清楚。听起来 OP 在问为什么 img 标签会随机有一个上边距。代码 sn-p 肯定会有助于澄清。
  • @Turnip 它在问为什么我们可以在图像应该是内联标签和内联标签不接受边距时应用边距
  • 是的,您的编辑说明了这一点。但是和原来写的一样,意思就完全不同了。
  • 这就是为什么包含代码很重要。它消除了歧义。

标签: css image margin


【解决方案1】:

这是因为 img 是一个内联 replaced 元素,它确实接受margin-top。它的行为不同于内联 non-replaced 元素(例如 span)。

详细说明此规范的相关部分:https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height

请注意,与您可以阅读的非替换内联元素不同,没有与边距相关的限制或特殊行为:

内联非替换框的垂直内边距、边框和边距从内容区域的顶部和底部开始,与“行高”无关。但是在计算 line box 的高度时只使用了 'line-height'。

宽度/高度的逻辑相同。他们使用img,但不适用于span

另一个与transform 相关的问题,同样的逻辑适用:CSS transform doesn't work on inline elements

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-06-23
    • 1970-01-01
    • 1970-01-01
    • 2010-10-13
    • 1970-01-01
    • 2021-11-19
    • 1970-01-01
    相关资源
    最近更新 更多