Html 尽管CSS相同，为什么第三个框在线条上看起来比其他框低？

所有的框都是完全相同的CSS。唯一的区别是前两个有图像，第三个有文本。为什么会更低

如果在中间，它甚至显得更低：

HTML:

只需使用：

---

您需要添加

垂直对齐：顶部

定义为内联块，因此将它们添加到

.description

和

.photo

---

请参阅。

谢谢，这已经解决了问题！知道我为什么需要这个吗？为什么父

div

和子

img

元素需要它？@DonRhummy内联或内联块元素的默认垂直对齐是

baseline

，它通常是通过div的文本内容计算的（我想，可能需要查找）。

.photo

元素可能不需要它，但是为了安全起见，您仍然可以添加它。但是

.photo

元素也是一个内联块。那么为什么它不需要呢？@DonRhummy它没有文本内容

<div class="content">
      <div class="photo">
        <picture>
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(min-width: 47.5625em)">
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(max-width: 47.5em)">
            <img srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" alt="">
        </picture>
      </div>
      <div class="description">
        <span>
          This is
          some text
          in here
        </span>
      </div>
      <div class="photo">
        <picture>
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(min-width: 47.5625em)">
            <source srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" media="(max-width: 47.5em)">
            <img srcset="http://www.comune.roncade.tv.it/public/Image/servizi_uffici/casa.jpg" alt="">
        </picture>
      </div>

    </div>

.content
{
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #fec321;
  text-align: center;
  overflow: hidden;
}

.content .photo
{
  position: relative;
  border: solid .75em #ffffff;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  display: inline-block;
}

.content picture, .content img, .content .description span
{
  position: relative;
  width: 14em;
  height: 14em;
  display: block;
}

.content .description
{
  position: relative;
  border: solid .75em #ffffff;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  display: inline-block;
}

.content .description,
.content .photo {
  vertical-align: top;
}