css - spazio verticale aggiunto sugli elementi con display: blocco in linea

Question

Ho una serie di elementi del contenitore di miniature con la visualizzazione delle proprietà css: blocco in linea ma quando si allineano l'uno accanto all'altro, il secondo elemento ha più spazio nella parte superiore rispetto al primo (vedi immagine allegata). Qualche idea del perché accada questo? C'è un modo migliore per allineare questi elementi uno accanto all'altro? So che farli galleggiare risolve questo problema, ma sembra che fluttuare non sia il modo migliore per farlo.

Ecco il mio codice:

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

Basta aggiungere vertical-align: top dove si dispone di display: inline-block.

Ulteriori informazioni qui: Why aren't these elements with display:inline-block properly aligned?

Answer 2

volte galleggiante è la migliore risposta.

.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

bisogna pensare in questo modo: i blocchi in linea sono fondamentalmente gli elementi in linea con un po 'di comportamento avanzato. Quindi, cosa succede quando si posizionano elementi in linea l'uno accanto all'altro? Ecco un esempio:

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

In questa frase a e stupid sono separati da uno spazio bianco. Questo è quello che ti aspetteresti. Nel tuo esempio un tag article è separato da uno spazio bianco dal successivo. Quindi la soluzione più semplice è mettere a nudo lo spazio bianco tra i tag in questo modo:

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

Un'altra soluzione è quella di galleggiare il contenitore, ma il display:inline-block è reso piuttosto inutile, quando si utilizza galleggianti. Puoi semplicemente spogliarlo.