DIV di chuyển khi tôi đặt văn bản trong đó

Question

Tôi đã dành một chút thời gian để tạo ra một phả hệ trong số các lớp div trên this site và tôi nhận được tất cả các liên kết độc đáo.

Nhưng khi tôi đặt văn bản trong đó, cho dù chỉ trong thẻ div hoặc trong thẻ p, nó sẽ di chuyển lớp div xuống đáng kể.

Nó dường như không thêm bất kỳ lề hoặc đệm hoặc bất cứ điều gì khác tôi có thể nhìn thấy trong khi kiểm tra các yếu tố, và nó dường như không ảnh hưởng đến các lớp div cháu.

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

Thêm văn bản tạo ra một cơ sở cho các div #parentwrap, vì vậy div được liên kết đến đó. Không có văn bản, không có đường cơ sở để div có chế độ bố cục dự phòng.

Để khắc phục, hãy đặt thêm #parentwrap { vertical-align:top; }