我花了一些时间在这个网站上用 div 层创建了一个谱系，我把它们都很好地对齐了。
但是当我将文本放入其中时，无论是在 div 还是在 p 标签中，它都会将 div 层显着向下移动。
它似乎没有添加任何边距或填充或我在检查元素时可以看到的任何其他内容，并且它似乎没有影响孙 div 层。
HTML：
<div id="pedigree">
<div id="parentwrap">
<div class="parent">test</div>
</div>
<div id="childwrap">
<div class="child">
<p>Am. Ch. Kenai's Aldebaran</p>
</div>
<div class="child">
<p>pAm. Ch. Santa Clara Del Viento</p>
</div>
</div>
<div id="grandchildwrap">
<div class="grandchild">Am. Can. Ch. Ryzann's Eclipse at Kenai</div>
<div class="grandchild">Am. Ch. Timber Ridge's Abi of Kenai</div>
<div class="grandchild">Am. Ch. Sky Run Gavril Virtual Zip JC</div>
<div class="grandchild">Am. Can. Ch. Tazeb's Zena</div>
</div>
</div>
CSS：
#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;