Question

我有一些麻烦地理解,为什么 element子对母集装箱的影响不同于直线锁元素的另一个元素,见:。

element 1
- element 2
  - div or img (display block)

<div style="border:1px solid">xjt
  <div style="border:1px solid;height:200px;display:inline-block">
    <img style="display:block;height:200px" src="https://www.w3schools.com/html/pic_trulli.jpg" />
  </div>
</div>

<div style="border:1px solid">xjt
  <div style="border:1px solid;height:200px;display:inline-block">
    <div style="height:200px">zzzz</div>
  </div>
</div>

In here, two use cases can be seen, one with a div and one with an img (display block). Why does the upper level container div align the "element 2" differently in both cases? I would not expect this.

I know that because of the inline-block display content is/can be rendered with a margin at the bottom, but why isn t this the same in both cases as I wouldn t expect the child of an HTML element to have such an effect on it s parent?

Answer 1

To answer to your question, the upper level container div align the "element 2" differently in both cases because the img element and the string "zzz" have different size. If "zzz" has the same size as the img element so in the case "one with a div" the string "xjt" will be push to the bottom and both cases will have the same result.

您可以修改以下案文:

<div style="border:1px solid">xjt
<div style="border:1px solid;height:200px;display:inline-block">
  <div style="height:200px; font-size: 218px;">zzzz</div>
 </div>

友情链接