Я потратил некоторое время на создание родословной из div-слоев на этом сайте, и я получил все, что было хорошо выровнено.
Но когда я помещаю в него текст, будь то в тегах div или в p, он значительно перемещает слой div.
Кажется, что он не добавляет никаких полей или дополнений или чего-либо еще, что я могу видеть, проверяя элемент, и это, похоже, не влияет на уровни div grandild.
HTML:
<div id="pedigree">
<div id="parentwrap">
<div class="parent">test</div>
</div>
<div id="childwrap">
<div class="child">
<p>Am. Ch. Kenai 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 Eclipse at Kenai</div>
<div class="grandchild">Am. Ch. Timber Ridge Abi of Kenai</div>
<div class="grandchild">Am. Ch. Sky Run Gavril Virtual Zip JC</div>
<div class="grandchild">Am. Can. Ch. Tazeb 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;