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

Question

替换元素 与基线对齐的是外边距边界

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

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

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

Answer 1

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-table
   elements, 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的下边缘。