CSS 对除图像以外的所有内容使用填充

Question

I'm using flexbox to build my page and I'm using the following to apply the same rules to all elements inside an article:

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

I then use media queries to change the layout but that's not the point of my problem.

Inside #article-wrapper, I have a couple of DIV elements containing text and images. With the CSS code above, everything gets a left & right padding of 20 px. It's fine but I'd like image to have a padding of 0 px.

Negative padding is not possible and applying the padding locally on each element would force me to wrap all text in

or

I thought of doing this:

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

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

But with this, images remain unaffected.

Do you see any way of creating an exception for one type of element ? (images in this case)

Here is an example: https://wp.laurentwillen.be/circuits/circuit-ecosse/chateau-culzean-et-drumlanring-dumfries-galloway

Thanks

Answer 1

Like so

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