html - 尽管使用相同的 CSS，为什么第三个框在线上看起来比其他框低？

Question

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

https://jsfiddle.net/1guxjmLe/3/

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

https://jsfiddle.net/1guxjmLe/4/

HTML:

<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>

CSS:

.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;
}

Answer 1

只需使用 vertical-align:top :

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

JSFiddle Demo