css - CSS 对除图像之外的所有内容使用填充

Question

我正在使用 flexbox 来构建我的页面，并且我正在使用以下内容将相同的规则应用于文章中的所有元素：

#article-wrapper > * 
{
    flex:1 100%;
    padding:0px 20px 0px 20px;
    box-sizing: border-box;  
}

然后我使用媒体查询来更改布局，但这不是我的问题的重点。

在#article-wrapper 中，我有几个包含文本和图像的DIV 元素。使用上面的 CSS 代码，所有内容都获得了 20 像素的左右填充。很好，但我希望图像的填充为 0 像素。

负填充是不可能的，并且在每个元素上本地应用填充会迫使我将所有文本包装在

或者

我想过这样做：

#article-wrapper > * 
{
    flex:1 100%;
    box-sizing: border-box;  
}

#article-wrapper:not(img) > * 
{
    padding:0px 20px 0px 20px;
}

但这样一来，图像仍然不受影响。

您是否看到为一种元素创建异常的任何方法？（本例中的图像）

这是一个例子：https ://wp.laurentwillen.be/circuits/circuit-ecosse/chateau-culzean-et-drumlanring-dumfries-galloway

谢谢

标签： css

Answer 1

像这样

#article-wrapper > *:not(img) {
    padding:0px 20px 0px 20px;
}