Imgが親部門の位置を変更します

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:table-cell;にdisplay:block;を変更し、またそれにvertical-align: top;を追加する必要があります。