title: CSS use padding for all except images
body: <p>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:</p>
  
  <pre><code>#article-wrapper &gt; * 
  {
      flex:1 100%;
      padding:0px 20px 0px 20px;
      box-sizing: border-box;  
  }
  </code></pre>
  
  <p>I then use media queries to change the layout but that's not the point of my problem.</p>
  
  <p>Inside #article-wrapper, I have a couple of DIV elements containing text and images. With the CSS code above, everything gets a left &amp; right padding of 20 px. It's fine but I'd like image to have a padding of 0 px.</p>
  
  <p>Negative padding is not possible and applying the padding locally on each element would force me to wrap all text in <p> or </p>
  
  <p>I thought of doing this:</p>
  
  <pre><code>#article-wrapper &gt; * 
  {
      flex:1 100%;
      box-sizing: border-box;  
  }
  
  #article-wrapper:not(img) &gt; * 
  {
      padding:0px 20px 0px 20px;
  }
  </code></pre>
  
  <p>But with this, images remain unaffected.</p>
  
  <p>Do you see any way of creating an exception for one type of element ? (images in this case)</p>
  
  <p>Here is an example: <a href="https://wp.laurentwillen.be/circuits/circuit-ecosse/chateau-culzean-et-drumlanring-dumfries-galloway" rel="nofollow noreferrer">https://wp.laurentwillen.be/circuits/circuit-ecosse/chateau-culzean-et-drumlanring-dumfries-galloway</a></p>
  
  <p>Thanks</p>