title: Span jumping down when I have an img tag before
body: <p>I am making a template for a site that im working on for myself... I have added a comment icon and a span to declare how much comments it is on the post. It is just a template of how I want it to be and it is not really working. </p>
  
  <p>The thing is that the icon and the span (with the comment) jumps down a row and displace itself the post has an image:
  <img src="https://i.stack.imgur.com/YU1BM.png" alt="screenshot"></p>
  
  <p>This is the post class I have every block in; </p>
  
  <p>Without picture: </p>
  
  <pre><code>&lt;a href="posts/post1.php" class="postlink"&gt;
    &lt;div class="post"&gt;
      &lt;img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px"&gt;
      &lt;p class="context"&gt;Random Text&lt;/p&gt;
      &lt;i class="fa fa-comment-o"&gt;&lt;/i&gt;&lt;span class="comment"&gt;  300&lt;/span&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="posts/post2.php" class="postlink"&gt;
    &lt;div class="post"&gt;
      &lt;img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px"&gt;
      &lt;img src="img/baugette.jpg" width="220" height="150" class="postimg"&gt;
      &lt;p class="context"&gt;Random Text&lt;/p&gt;
      &lt;i class="fa fa-comment-o"&gt;&lt;/i&gt;&lt;span class="comment"&gt;  500&lt;/span&gt;&lt;br&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>With picture:</p>
  
  <pre><code>&lt;a href="posts/post1.php" class="postlink"&gt;
    &lt;div class="post"&gt;
      &lt;img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px"&gt;
      &lt;p class="context"&gt;Random Text&lt;/p&gt;
      &lt;i class="fa fa-comment-o"&gt;&lt;/i&gt;&lt;span class="comment"&gt;  300&lt;/span&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="posts/post2.php" class="postlink"&gt;
    &lt;div class="post"&gt;
      &lt;img src="img\userprofile.png" alt="img\userprofile.png" width="100px" height="100px"&gt;
      &lt;img src="img/baugette.jpg" width="220" height="150" class="postimg"&gt;
      &lt;p class="context"&gt;Random Text&lt;/p&gt;
      &lt;i class="fa fa-comment-o"&gt;&lt;/i&gt;&lt;span class="comment"&gt;  500&lt;/span&gt;&lt;br&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And this is the ONLY CSS code for that image: </p>
  
  <pre><code>img.postimg {
      margin-top: -100px;
  }
  </code></pre>