ラインアップimgとdiv css

Question

<img>とdivを一列に並べようとしていますが、<img>に余白/パディングがあるようです。ここで

は、私が試したものです：

.Box { 
 
    display: inline-block; 
 
} 
 

 
.myDiv { 
 
    background: blue; 
 
    width: 100px; 
 
    color: white; 
 
} 
 

 
img { 
 
    margin: 0px !important; 
 
    padding: 0px !important; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<div class="Box"> 
 
    <div class="myDiv"> 
 
    Content 
 
    </div> 
 
</div> 
 
<div class="Box"> 
 
    <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg"> 
 
</div>

私はそれが次のようになりたい：

Answer 1

インライン要素のデフォルトの垂直方向の配置は、ベースラインです、だから、代わりにボトムのようなものを望んで、あなたのボックスの高さを取り除くdiv（unl `垂直整列を見て、一目で

.Box { 
 
    display: inline-block; 
 
} 
 

 
.myDiv { 
 
    background: blue; 
 
    width: 100px; 
 
    color: white; 
 
} 
 

 
img { 
 
    margin: 0px !important; 
 
    padding: 0px !important; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    vertical-align: bottom; 
 
}

<div class="Box"> 
 
    <div class="myDiv"> 
 
    Content 
 
    </div> 
 
</div> 
 
<div class="Box"> 
 
    <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" /> 
 
</div>