主页 / 问题 / 1189239
Accepted
Linne
Asked:2021-10-12 18:45:40 +0800 CST2021-10-12 18:45:40 +0800 CST

CSS：空边距不起作用

  • 772

同志们！

请告诉我为什么这不起作用：

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>
css

1 个回答

  1. Best Answer

    更新！- 像这样？

    已经给出了与您的问题接近的答案。基于此，这是您的解决方案：

    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>

    • 2

相关问题