CSS: не работает нулевой margin

Question

Товарищи!

Подсткажите, почему не работает вот такая конструкция:

img {
    margin: 10px 0 20px 0;
}
p.caption + img {
    margin-bottom: 0;
}

Цель: нижний отступ перед всеми элементами, за исключением p.caption. Что я делаю не так?

<img src="/img/5f53d5016e14e.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>

<img src="/img/5f6bab41180b3.jpg" alt="" />
<p class="caption">Lorem ipsum dolor sit amet...</p>

Answer 1

UPD!! - Вот так?

Ранее был дан ОТВЕТ, приближенный к вашему вопросу. На основании этого вот вам решение:

img {
    margin: 10px 0 20px 0;
}
img + p ~img {
    margin-bottom: 0 !important;
}


/* Для примера: */
img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
}
/* Для примера: */

<img src="https://habrastorage.org/webt/4m/sq/is/4msqisjgyk-ate5abefnqlgamik.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>

<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="" />
<p class="caption">Lorem ipsum dolor sit amet...</p>

БЛОГ НА HUSL

CSS: не работает нулевой margin

Ответы (1 шт):