Испытание: котогалерея на inline-block [32/32]

Курсы §15. Сетки
25

Хоть и поздно, но для остальных, думаю, полезно будет:smile:

Inline-block имеет свойство строчного поля и блока. Но тут нужно сделать акцент именно на строчном. Я сам не с самого начала въехал, поэтому решил попробовать донести до остальных “на пальцах”. Inline-block может принимать text-align, но берет он его от родителя. Т.е. выравнивание Вы должны задавать не в самом блоке, а в предыдущем. Как это можно еще объяснить. Возьмем тот же span:

<span> Текст </span>

Это строчный элемент. Для него можно задать text-align, но задавать Вы его будете не самому тексту, а как бы тегу , верно?

span {
text-align: center;
}

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

<span><div>Inline-Block</div></span>

т.е. Текст=<div>Inline-Block</div>;

В сетке, конечно же, нет span’a, но есть родительский блок <div>, назовем его “родитель”, тогда

<div class="родитель">
     <div class="inline-block">
          Inline-Block
     </div>
</div>

Так вот строчные свойства, такие как text-align нужно задавать <div class="родитель">, а вот блочные уже самому <div class="inline-block">.

А испытание и проходится с применением данного свойства, просто задавать его нужно не .item, а его родительскому блоку .gallery.

.gallery{
    font-size: 0px;
    padding-top:10px;
    text-align: center;
}

.gallery .item{
    display: inline-block;
    font-size: 12px;
    width:125px;
    margin:0 10px;
    margin-bottom:10px;
}
18 лайков