title: Target <img> in <p> and remove padding?
body: <p>During the last days I've tried to learn CSS and HTML, in order to make my first own theme for Tumblr (don't judge me, seemed like a good platform for testing things). I've ran into several problems which I was able to fix by myself, yet now I'm at the end of my knowledge, and Google wasn't able to help me. I've also tried to search this site, yet with no success. So if there's already a topic about this, I'm terribly sorry.</p>
  
  <p>Basicly, Tumblr adds an <code>&lt;p&gt;</code>-Tag around every <code>&lt;img&gt;</code> you add, so the padding I applied to p also get's applied to the image, and I'm unable to overwrite this. A dirty fix worked for some time, yet as I'm trying to make the site responsive, I can't find any workaround or fix.</p>
  
  <p>Here's the basic HTML-Structure for an entry:</p>
  
  <pre><code>{block:Text}
      &lt;div class="postcard"&gt;
          {block:Title}
              &lt;a href="{Permalink}"&gt;&lt;h2&gt;{Title}&lt;/h2&gt;&lt;/a&gt;
          {/block:Title}
          &lt;div class="text"&gt;
              {Body}
          &lt;/div&gt;
      &lt;/div&gt;
  {/block:Text}
  </code></pre>
  
  <p>Which results in this:</p>
  
  <pre><code>&lt;p&gt;Duis autem vel eum iriure dolor.&lt;/p&gt;
  
  &lt;p&gt;&lt;img src="http://i.minus.com/dbmLqVdFyHN5Tg/16.jpg" alt=""/&gt;&lt;/p&gt;
  </code></pre>
  
  <p>I want some padding on both sides of a paragraph and some spacing at the end of one, so I added this CSS:</p>
  
  <pre><code>.postcard p, ul {
      padding-right: 50px;
      padding-left: 50px;
      margin-bottom: 25px;
  }
  </code></pre>
  
  <p>So far, so good. Now, here's the main problem: The image in a post should cover the whole width of <code>.postcard</code>, while also being responsive. Using <code>max-width: 100%;</code> would work, yet because the img is inside a p, a total of 100px padding gets applied to it. The following code is a dirty fix, but is obviously not responsive:</p>
  
  <pre><code>.text img {
      width: 700px;
      height: auto;
      display: block;
      margin: 0px -50px;
  }
  </code></pre>
  
  <p>So how can I get rid of the padding for the image? Many thanks in advance!</p>