title: How to remove extra space under paragraph in HTML/CSS
body: <p>With HTML and CSS I have this vertical space between a p tag and an image. It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/lZdYg.jpg" alt="enter image description here"></p>
  
  <p>See that extra vertical space between the hello and the image? How do i remove that? I know I can absolutely position the image closer up to the hello but I would like to know what's causing the space.</p>
  
  <p>My code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="Box"&gt;
      &lt;p&gt; hello &lt;/p&gt;&lt;img class="contextimg" WIDTH="50" HEIGHT="50"  SRC="pic.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.Box                           //this is the parent div
  {
      background-color:red;
      width:60px;
      margin:0px;
      margin-bottom: 0px;
      padding:0px;
  
  
  }
  .contextimg                            //this is for the image
  {
      position:relative;
      margin:0px;
      padding:0px;
      line-height:0px;
  
  }
  </code></pre>
  
  <p>Note: I've also tried to set the body's margin and padding to 0 but it didn't work.</p>