title: DIV moves when I put text in it
body: <p>I spent some time creating a pedigree out of div layers on <a href="http://dev4.peeknpoke.co.uk/dogs/jester.php" rel="noreferrer">this site</a> and I got it all nicely aligned.</p>
  
  <p>But when I put text in it, whether just in the div or in p tags, it moves the div layer down significantly.</p>
  
  <p>It doesn't seem to add any margin or padding or anything else I can see while inspecting the element, and it doesn't seem to be affecting the grandchild div layers.</p>
  
  <p><strong><a href="http://jsfiddle.net/qfjkLze3/" rel="noreferrer">JSFiddle</a></strong></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="pedigree"&gt;
      &lt;div id="parentwrap"&gt;
          &lt;div class="parent"&gt;test&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="childwrap"&gt;
          &lt;div class="child"&gt;
              &lt;p&gt;Am. Ch. Kenai's Aldebaran&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="child"&gt;
              &lt;p&gt;pAm. Ch. Santa Clara Del Viento&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="grandchildwrap"&gt;
          &lt;div class="grandchild"&gt;Am. Can. Ch. Ryzann's Eclipse at Kenai&lt;/div&gt;
          &lt;div class="grandchild"&gt;Am. Ch. Timber Ridge's Abi of Kenai&lt;/div&gt;
          &lt;div class="grandchild"&gt;Am. Ch. Sky Run Gavril Virtual Zip JC&lt;/div&gt;
          &lt;div class="grandchild"&gt;Am. Can. Ch. Tazeb's Zena&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#pedigree {
      position: relative;
      width: 584px;
      height: 204px;
      margin: 0 auto;
      margin-top: 15px;
      padding-bottom: 15px;
      border-bottom: 1px dotted black;
  }
  #parentwrap {
      position: relative;
      display: inline-block;
      margin: 0;
      width:auto;
      height: 205px;
  }
  .parent {
      position: relative;
      width: 190px;
      height: 202px;
      margin: 0px;
      padding: 0px;
      border: 1px solid black;
  }
  #childwrap {
      position: relative;
      display: inline-block;
      margin: 0;
      width: auto;
      height: 205px;
  }
  .child {
      position: relative;
      width: 190px;
      height: 95px;
      margin: 0px;
      padding: 0px;
      border: 1px solid black;
      margin-bottom: 10px;
  }
  #grandchildwrap {
      position: relative;
      display: inline-block;
      width: auto;
      height: 205px;
  }
  .grandchild {
      position: relative;
      width: 190px;
      height: 46px;
      margin: 0px;
      padding: 0px;
      border: 1px solid black;
      margin-bottom: 4px;
  }
  .parent, .child, .grandchild {
      -moz-border-radius: 35px;
      border-radius: 35px;
  </code></pre>