箱子阴影对图像造成不利影响

Question

首先，这是一张图片来说明我正在处理的事情：

我已经看过其他人处理此问题的一些实例，其中各种边框应用于图像的底部。一个解决方案是将图像设置为display：block，但没有解释为什么要修复它。我试图理解为什么图像在应用框阴影属性时必须具有块的显示值。

HTML

<div id="showcase">
  <section>
    <ul id="gallery">
      <li><img src="img/img1.png" alt="One"></li>
      <li><img src="img/img2.png" alt="Two"></li>
      <li><img src="img/img3.png" alt="Three"></li>
      <li><img src="img/img4.png" alt="Four"></li>
      <li><img src="img/img5.png" alt="Five"></li>
      <li><img src="img/img6.png" alt="Six"></li>
      <li><img src="img/img7.png" alt="Seven"></li>
    </ul>
  </section>
  <footer>
  </footer>
</div>

CSS

 #showcase {
  max-width: 850px;
  border: 2px dotted;
  margin: 0 auto;
  background: silver;
 }  

 #gallery {
  list-style: none;
  padding: 0;
  margin: 0;
 }

 #gallery li {
  width: 45%;
  float: left;
  margin: 2.5%;
  box-shadow: 0 8px 10px -5px;
 }

Answer 1

实际上，您只是错过了使用

正确定位内联块图像

#gallery img{
    vertical-align: top; /* or any other value from */
}

https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

问题示例：

＆＃13;

＆＃13;

#gallery li{
  display:inline-block;
  box-shadow: 0 8px 10px -5px;
}

＆＃13;

<ul id="gallery">
  <li>
    <img src="//placehold.it/60x60">
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

图片上的垂直对齐示例

＆＃13;

＆＃13;

#gallery li{
  display:inline-block;
  box-shadow: 0 8px 10px -5px;
}
#gallery li img{
  vertical-align: top;
}

＆＃13;

<ul id="gallery">
  <li>
    <img src="//placehold.it/60x60">
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

Phrasing HTML elements与img一样，除非设置（覆盖）为block级别的显示状态，否则需要印刷行框。