html - img 更改父 div 的位置

Question

我在我网站的主页上工作，想显示不同种类的方形模块。一切正常，直到我在模块上使用图像。每当我添加一个 img 时，父 div 的位置都会向下移动几个像素。

这是我的代码:

HTML:

<div class="module-box">
  <div class="module-dummy"></div>
  <div class="module-body">
    <a href="@post.linkToVideo">
      <div class="play-button-div">
        <img src=@Umbraco.Media(post.image).Url width="100%" height="100%" />
        <span class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></span>
      </div>
    </a>
  </div>
</div>

CSS:

.module-box {
    display: inline-block;
    position: relative;
    width: 100%;
}

.module-dummy {
    margin-top: 100%;
}

.module-body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.play-button-div {
    margin: 0 auto;
    display:table;
    position:relative;
}

.play-button-div img {
    display:block;
    margin: 0;
    padding: 0;
    position:relative;
}

.play-button-div i{
    width: 100px;
    height: 100px;
    color: #0080ff;
    background-color: #fff;
    border-radius: 50px;
      border: 3px solid #0080ff;
    font-size: 70px;
   text-align: center;
    line-height:100px;
    text-indent:15px;
    opacity: .8;

}
.play-button-icon {

    width: 100px;
    height: 100px;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
}

.play-button-div:hover img {
  opacity: .6;
}

.play-button-div:hover i {
    background-color: #0080ff;
    color: #fff;
    border: 3px solid #FFF;
}

Answer 1

我想你的意思是父 DIV 通过在图像下方添加一点空间来变得更高/将后续元素向下推？在这种情况下，您可以将 line-height: 0 添加到图像容器中(但前提是其中没有文本)。

另一方面，如果这是您的容器和图像的 CSS:

.play-button-div {
    margin: 0 auto;
    display:table;
    position:relative;
}
.play-button-div img {
    display:block;
    margin: 0;
    padding: 0;
    position:relative;
}

，那么你应该将.play-button-div img中的display:block;改为display:table-cell;，并且还要添加 vertical-align: top; 到它。