Css 当我将文本放入DIV时，它会移动

我花了一些时间创建了一个由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>

---

添加文本将为#parentwrap div创建基线，以便该div与该基线对齐。没有文本，就没有基线，因此div采用回退布局模式

---

要修复此问题，请设置add

#parentwrap{vertical align:top；}

请参见“不相关”，但您网站上的副本充满拼写/语法错误。记住也要解决这个问题！如果你从div

#谱系
中删除
height
，这一点会增加代码吗？将这两个尽可能小的标记集/css等分离出来。这通常会启发你，你可以从更集中的集合中学习。另一方面，根据我有限的经验，它可能位于比容器更大的内部。我确实想知道这是否是一个对齐问题，但我不明白为什么会这样（因此，询问而不是猜测-更好地理解为什么），我不知道为什么默认情况下它会在那里创建基线，看起来很没用，但这确实解决了我的问题，所以非常感谢你。有这么一个精彩的社区真的很棒。@Alohci你能解释一下吗，或者给我一个链接来解释“基线”。@Nix-确实如此。与基线对齐（默认设置）的精确规则如下：。请特别注意，上面写着“基线：将框的基线与父框的基线对齐。如果框没有基线，请将底部边距边缘与父框的基线对齐。”谢谢。我认为这有助于我们这些有抱负的设计师；）
#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;