css применение поля, которого нет в коде

Question

довольно новый для веб-разработчика. У меня есть страница с основным документооборотом, с изображениями, за которыми следует текст.

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>

Моя проблема заключается в том, что есть пространство между изображениями и текстом:

Я веб-инспектор элемента текста выбран, и вы можете видеть, это зазор между этим элементом и изображением выше. Все поля и мои paddings равны 0, так почему я получаю этот пробел? Большое спасибо!

Answer 1

Это пространство вызвано изображением, потому что это встроенный элемент. Чтобы удалить пространство просто добавить display: block к img

CSS

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

Answer 2

Try добавление 0 маржи к вашему IMG тегу. У многих тегов HTML есть прикрепленный к ним CSS по умолчанию, который будет применяться, если вы специально не переопределите его.

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

Answer 3

Вы можете использовать display: block и float: left для IMG.