当我将文本放入其中时 DIV 移动[关闭]

Question

我花了一些时间从this site 上的 div 层创建了一个谱系，我得到了很好的对齐。

但是当我将文本放入其中时，无论是在 div 还是在 p 标签中，它都会将 div 层显着向下移动。

它似乎没有添加任何边距或填充或任何其他我在检查元素时可以看到的东西，而且它似乎没有影响孙 div 层。

JSFiddle

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;

Answer 1

添加文本会为 #parentwrap div 创建基线，因此 div 会与之对齐。没有文本，就没有基线，因此 div 采用后备布局模式。

要修复，请设置添加#parentwrap { vertical-align:top; }