Tại sao div nội tuyến chặn được định vị thấp hơn khi có nội dung?

Question

Nếu bạn có ba div giống hệt nhau được đặt trong khối nội tuyến, chúng được căn chỉnh hoàn hảo. Nhưng nếu bạn đặt bất kỳ nội dung nào trong bất kỳ div nào thì nó sẽ giảm xuống dưới những phần khác. Tại sao nó làm điều đó? Ví dụ

<div class="left">?</div> 
<div class="center"></div> 
<div class="right"></div> 

div { 
    display:inline-block; 
    margin-:2px; 
    height:100px; 
    width:25px; 
    border:1px solid black; 
}​ 

http://jsfiddle.net/7kkC6/

tốt hơn: http://jsfiddle.net/7kkC6/9/

Answer 1

Điều này là do vertical-align là do thiết lập mặc định đến đường cơ sở. Bạn có thể khắc phục vấn đề của bạn bằng cách thiết lập nó để đầu:

div { 
    display:inline-block; 
    margin-:2px; 
    height:100px; 
    width:25px; 
    border:1px solid black; 
    vertical-align: top; 
}​ 

Bản demo ở đây: http://jsfiddle.net/7kkC6/4/

Answer 2

Nó hoạt động nếu bạn thay đổi display-block và thêm float:left;

Working example.

Answer 3

Để hiểu được thực tế, bạn có thể đọc Collapsing Margins Between Adjacent Elements và another on SO nhưng bạn có thể sửa chữa nó bằng cách thêm float:left; và hy vọng bạn đã biết rằng.

Fixed Example.