title: Why are divs with text not following inline-block pattern?
body: <p>I have a series of divs that have images in them. Here's the CSS:</p>
  
  <pre><code>p.titles-box {
    font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
    font-size: 12pt;
    color:black;
    font-weight:300;
  }
  #a {
    display:inline-block;
    width:200px;
    height:200px;
    background-size: cover;
    margin: 20px 20px 20px 20px;
    border-radius: 15px;
    cursor:pointer;
    opacity: 0.7;
    transition: opacity 0.5s ease;
  }
  #a:hover {
    opacity: 1;
  }
  </code></pre>
  
  <p>for images in the html I do as follows:</p>
  
  <pre><code>&lt;div id="a" style="background-image:url('asdfasd.png')"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and for text I do as follows:</p>
  
  <pre><code>&lt;div id="a" style="background-color:white"&gt;&lt;p class="titles-box"&gt;WordsWordsWords WordsWordsWords&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And yet only the divs with text end up off-grid. Any reason why?</p>
  
  <p>Thanks!</p>
  
  <p>Here's a pic of the issue: <a href="http://i.imgur.com/e5AdR27.png" rel="nofollow">http://i.imgur.com/e5AdR27.png</a></p>