行内置换img元素的 行内盒子 基线对齐 的问题？

作者站长头像
站长
· 阅读数 5

行内置换img元素的 行内盒子 基线对齐 的问题？替换元素 与基线对齐的是外边距边界

<div class="" style=" margin:40px;width:200px; outline:2px solid red;">
  xxxxx<img style="" src="https://picsum.photos/80/80" />xxxx
</div>

行内置换img元素的 行内盒子 基线对齐 的问题？

<div class="" style=" width:200px; outline:2px solid red;">
  xxxxx<img style="margin-bottom:-40px;" src="https://picsum.photos/80/80" />xxxx
</div>

行内置换img元素的 行内盒子 基线对齐 的问题？

问题： 为什么图2中的img margin下边缘没有和x的下边缘对其？

回复
1个回答
avatar
test
2024-06-19

css2 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:
  1. The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-tableelements, this is the height of their margin box; for inline boxes, this is their 'line-height'. (See "Calculating heights and margins" and the height of inline boxes in "Leading and half-leading".)

因为设置margin-bottom: -40px让inline replace element(这里的image)的margin box的height变小了。此时，你看到的图片的下边缘并不是它的margin的下边缘。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容