css - dodaje się pionową spację na elementach z wyświetlaczem: blok inline

Question

Mam serię elementów kontenera miniatur z ekranem właściwości css: inline-block, ale gdy są one ustawione jeden obok drugiego, drugi element ma więcej miejsca na górze niż na pierwszym (patrz załączony obraz). Masz pomysł, dlaczego tak się dzieje? Czy istnieje lepszy sposób na wyrównywanie tych elementów obok siebie? Wiem, że unoszenie się z nimi rozwiązuje ten problem, ale wydaje się, że nie jest to najlepszy sposób, aby to osiągnąć.

Oto mój kod:

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

Po prostu dodaj vertical-align: top, gdzie masz display: inline-block.

Więcej informacji tutaj: Why aren't these elements with display:inline-block properly aligned?

Answer 2

Czasami pływający jest najlepszą odpowiedzią.

.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

Musisz myśleć w ten sposób: Bloki inline są w zasadzie elementami liniowymi z odrobiną ulepszonego zachowania. Co się dzieje, gdy umieszczasz elementy leżące obok siebie? Oto przykład:

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

W tym zdaniu a i stupid są oddzielone spacją. Tego możesz się spodziewać. W twoim przykładzie znacznik article jest oddzielony białą spacją od następnej. Więc najprostszym rozwiązaniem jest, aby pozbawić białą przestrzeń między znacznikami tak:

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

Innym rozwiązaniem jest unosić kontener, ale display:inline-block staje się raczej bezużyteczne, podczas korzystania z pływaków. Możesz po prostu go rozebrać.