コード内にマージンを適用するCSS

Question

かなり新しいWeb開発者です。私は基本的な文書の流れを持つページを持っています。画像とテキストが続いています。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: url(Images_Albums/Background.jpg) no-repeat; 
 
    background-size: 100%; 
 
} 
 
article { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 32%; 
 
    height: 100%; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    background: url(Images_Albums/FrontImage.jpg) no-repeat; 
 
    background-size: 100%; 
 
} 
 
#container { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 9%; 
 
    position: relative; 
 
    width: 43%; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
    color: white; 
 
    font-family: QuaestorSans; 
 
    text-align: center; 
 
}

<article> 
 
    <div id="container"> 
 

 
    <div id="album1" class="albums"> 
 
     <img src="Images_Albums/Album1.jpg"> 
 
     <p>[details]</p> 
 
    </div> 
 

 
    <div id="album2" class="albums"> 
 
     <img src="Images_Albums/Album2.jpg"> 
 
     <p>[details]</p> 
 
    </div> 
 

 
    <div id="album3" class="albums"> 
 
     <img src="Images_Albums/Album3.jpg"> 
 
     <p>[details]</p> 
 
    </div> 
 
    </div> 
 
</article>

私の問題は、画像とテキストの間にスペースがあるということです。

私が選択したテキスト要素を持つWebインスペクタを持っていて、そこに見ることができますこの要素と上の画像との間の隙間です。私のすべてのマージンとパディングは0なので、なぜこのギャップがありますか？どうもありがとう！

Answer 1

このスペースは、インライン要素であるため、画像のスペースが原因です。スペースを削除するには、単に追加display: block

imgにCSS

img { 
    max-width: 100%; 
    display: block; 
} 

Answer 2

は、あなたのimgタグに0マージンを追加してみてください。多くのHTMLタグにはデフォルトのCSSが添付されており、特に指定しない限り適用されます。

img { 
    max-width: 100%; 
    margin: 0; 
} 

Answer 3

あなたは、IMGのためdisplay: blockとfloat: leftを使用することができます。