元素主要分为两种显示模式：块级元素和内联元素

Question

在下面的例子中，这个问题的关键在于理解HTML元素的默认显示模式以及它们如何影响元素的高度。在HTML中，元素主要分为两种显示模式：块级元素和内联元素。块级元素（如

）默认就会占据其父元素的全部宽度，并且可以设置高度和宽度。内联元素（如 ）则只占据其内容所需的宽度，并且通常不会设置高度和宽度。这是HTML的默认行为。

Answer 1

引自免费微信小程序：皆我百晓生

这个问题的关键在于理解HTML元素的默认显示模式以及它们如何影响元素的高度。在HTML中，元素主要分为两种显示模式：块级元素和内联元素。块级元素（如 <div>）默认就会占据其父元素的全部宽度，并且可以设置高度和宽度。内联元素（如 <span>）则只占据其内容所需的宽度，并且通常不会设置高度和宽度。这是HTML的默认行为。

在你的例子中，<span> 是一个内联元素，它默认不会扩展以容纳其子元素（如 <img>）的高度。即使 <img> 标签有其自己的高度，它仍然被视为内联元素的一部分，并不会改变其父元素 <span> 的高度。这是因为在CSS中，内联元素是不设置宽高（包括最小宽度和最小高度）的。而图片标签 <img> 即使作为内联元素的一部分，它的高度和宽度还是由其自身的属性（如 height 和 width）决定的。因此，尽管图片有自己的高度，但它不会撑起其父元素 <span> 的高度。

然而，文本内容可以撑起内联元素的高度，因为文本内容本身就会占据一定的空间，当文本内容增多时，内联元素的高度也会随之增加。而对于像 <img> 这样的替换元素（replaced element），其尺寸由自身的 height 和 width 属性决定，不会根据内容动态调整大小。因此即使图片有设定的高度，它也不会改变其父级内联元素的高度。

如果你希望 <img> 元素能够撑起其父元素 <span> 的高度，一种可能的解决方案是将 <span> 的显示模式从默认的 inline 改为 block 或 inline-block。这样，<span> 就会像块级元素一样占据其父元素的全部宽度，并且可以设置高度和宽度来容纳其子元素（如 <img>）。例如：

.container span {
  display: inline-block; /* 或者 block */
  width: auto; /* 或者设置具体的宽度 */
  height: auto; /* 或者设置具体的最小高度来确保撑开父元素 */
}

这样就可以使 <span> 元素能够根据其子元素（如 <img>）的高度来调整其自身的高度。不过要注意，这样的改变可能会影响到页面布局的其他部分，因此在实际应用中需要谨慎使用。