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;它。