Inline-block vs float

Float не завжди зручний: наприклад, при верстці сітки із зображенням. Іноді доречно застосовувати inline-block, який імітує поведінку float'а.

Що таке inline-block?

Звичайна структура блокового елемента:

Inline-block - це значення, які можна призначити властивості display. Назва походить від деяких характеристик як рядкового, так і блокового елементів.

• Блочні (block) елементи мають висоту, ширину, padding, margin, border, а також розташовуються вертикально, один під одним.
• Рядкові (inline) елементи розташовуються горизонтально, один за одним.
• Елементи inline-block мають характеристики як блокових, так і малих елементів.

Inline block vs float: відмінності

• На відміну від float'у, inline-block знаходиться в document flow — «потоці документа», тому немає необхідності застосовувати clearfix або overflow: hidden.
• Очевидно, що float неможливо позиціонувати центром за допомогою text-align: center.
• Inline-block за промовчанням вирівнюється по базовій лінії, а float - по верхньому краю.
• Якщо на сторінці кілька inline-block'ів, кожен з яких розташований з нового рядка, між ними будуть деякі проміжки.
• Inline-block не підтримується або підтримується частково в IE6 та IE7

Для боротьби із проміжками можна використовувати кілька технік. Видалення пропусків у списках:

Використання негативного значення margin:

Дивний спосіб з відсутністю тега LI, що закриває:

Встановлення значення font-size на нуль:

Що використовувати?

Вибір між inline-block та float необхідно робити, виходячи з розв'язуваних завдань у конкретному дизайні. У результаті все зводиться до відмінностей цихдвох інструментів:

• Використовуйте inline-block, якщо більшою мірою необхідний контроль за вертикальним вирівнюванням та горизонтальним позиціонуванням елементів.
• Використовуйте float, якщо необхідно обтікання елементів, а також підтримка старими браузерами, і не хочеться вовтузитися з проблемою порожніх просторів між блоками.

Сітка зображень

Такі сітки використовуються у фотогалереях. На цьому прикладі можна добре проілюструвати поведінку inline-block та float. Використання float виправдане, якщо зображення мають однакову висоту. Якщо ж висота відрізняється, то елементи можуть відображатися криво:

Inline-block'и не мають такої проблеми, тому що розташовуються на одному рівні в рядку. Тому для верстки галереї краще підійде inline-block:

Ми звикли використовувати float для вирішення багатьох завдань при верстці сторінок. Однак іноді простіше та зручніше застосовувати inline-block. А іноді правильніше використати старі добрі таблиці.

Використані матеріали та корисні посилання на тему:

---