我花了一些时间在 this site上用div层创建一个谱系,我把它完全对齐了.

但是当我在其中放入文本时,无论是在div还是在p标签中,它都会显着降低div层.

它似乎没有添加任何边距或填充或我在检查元素时可以看到的任何其他内容,并且它似乎不会影响孙子div层.

JSFiddle

HTML：

@H_502_10@<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：

@H_502_10@#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;