css - không gian dọc được thêm vào các phần tử có hiển thị: inline-block

Question

Tôi có một loạt các phần tử hình thu nhỏ với hiển thị thuộc tính css: inline-block nhưng khi chúng xếp hàng cạnh nhau, phần tử thứ hai có nhiều không gian hơn đầu tiên (xem hình đính kèm). Bất kỳ ý tưởng tại sao điều này xảy ra? Có cách nào tốt hơn để xếp các phần tử này lên cạnh nhau không? Tôi biết rằng nổi họ giải quyết vấn đề này, nhưng nó có vẻ như nổi không phải là cách tốt nhất để đi về điều này.

Dưới đây là mã của tôi:

HTML:

<article class="thumb_container"> 
    <div class="thumb_content"> 
     <img src="images/perlin.jpg" alt="Perlin Lines" class="thumb_img"/> 
     <header class="thumb_header">Perlin Lines</header> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. Etiam ut. 
      <a href="#">More...</a> 
     </p> 
    </div> 
</article> 

<article class="thumb_container"> 
    <div class="thumb_content"> 
     <img src="images/branching.gif" alt="Branching" class="thumb_img"/> 
     <header class="thumb_header">Branching</header> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus ac libero iaculis interdum nec id tortor. quis, ullamcorper id nisi. 
      <a href="#">More...</a> 
     </p> 
    </div> 
</article> 

CSS:

.thumb_container { display: inline-block; margin-left: 20px; width:220px; background: #fff; -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); } 
.thumb_container:first-child { margin-left: 0px; } 

Answer 1

Chỉ cần thêm vertical-align: top nơi bạn có display: inline-block.

Thông tin thêm tại đây: Why aren't these elements with display:inline-block properly aligned?

Answer 2

Đôi khi nổi là câu trả lời tốt nhất.

.thumb_container { 
    display: inline-block; 
    float: left;    <------- 
    margin: 0 0 0 20px; 
    width: 220px; 
    background: #fff; 
    -moz-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); 
    -webkit-box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); 
    box-shadow: 1px 1px 1px rgba(10, 72, 90, 0.2); 
} 
.thumb_container:first-child { margin-left: 0px; } 

Answer 3

Bạn phải suy nghĩ theo cách này: Khối nội tuyến là các yếu tố nội tuyến cơ bản với một chút hành vi nâng cao. Vậy điều gì xảy ra, khi bạn đặt các phần tử nội tuyến bên cạnh nhau? Dưới đây là ví dụ:

<p>This is <strong>a</strong> <span>stupid</span> example.</p> 

Trong câu này a và stupid được ngăn cách bằng khoảng trắng. Đó là những gì bạn mong đợi. Trong ví dụ của bạn, một thẻ article được phân tách bằng khoảng trắng từ thẻ tiếp theo. Vì vậy, giải pháp đơn giản nhất là dải khoảng trắng giữa các thẻ như thế này:

<article> 
    ... 
</article><article> 
    ... 
</article> 

giải pháp khác là thả nổi container, nhưng display:inline-block được trả lại chứ không phải vô ích, khi bạn sử dụng phao nổi. Bạn có thể chỉ đơn giản là loại bỏ nó.