css - добавлено вертикальное пространство на элементах с дисплеем: встроенный блок

У меня есть ряд элементов контейнера эскизов с отображением свойств css: inline-block, но когда они выстраиваются рядом друг с другом, второй элемент имеет больше места сверху, чем первый (см. Прикрепленное изображение). Любая идея, почему это происходит? Есть ли лучший способ связать эти элементы рядом друг с другом? Я знаю, что плавающие они решают эту проблему, но похоже, что плавание - это не лучший способ сделать это.

Вот мой код:

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; }

Ответ 1

Просто добавьте vertical-align: top где у вас есть display: inline-block.

Подробнее здесь: Почему эти элементы не отображаются: встроенный блок правильно выровнен?

Ответ 2

Вы должны так думать: встроенные блоки - это в основном встроенные элементы с немного улучшенным поведением. Итак, что происходит, когда вы размещаете встроенные элементы рядом друг с другом? Вот пример:

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

В этом предложении a и stupid отделены пробелом. Это то, чего вы ожидаете. В вашем примере один тег article отделен пробелом от следующего. Поэтому самым простым решением является разделение пробелов между тегами следующим образом:

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

Другое решение состоит в том, чтобы плавать в контейнере, но display:inline-block оказывается бесполезным, когда вы используете float. Вы можете просто снять его.

Ответ 3

Иногда плавание - лучший ответ.

.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; }