Что значит display inline block: Inline-block как замена float / Хабр

Leave a Comment / Разное / By /

Inline-block как замена float / Хабр

grokru

Время на прочтение 2 мин

Количество просмотров

144K

Разработка веб-сайтов *CSS *

Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем 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

Посмотреть демонстрацию

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

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Использование отрицательного значения margin:

nav a {
  display: inline-block;
  margin-right: -4px;
}

Странный способ с отсутствием закрывающего тега LI:

<ul>
  <li>one
  <li>two
  <li>three
</ul>

Установка значения font-size на ноль:

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

Более подробно об этих способах можно прочитать в статье CSS-tricks.

Что использовать?

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

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

Сетка изображений

Такие сетки используются в фотогалереях. На этом примере можно хорошо проиллюстрировать поведение inline-block и float. Использование float оправдано, если изображения имеют одинаковую высоту. Если же высота отличается, то элементы могут отображаться криво:

Inline-block’и не имеют такой проблемы, потому что располагаются на одном уровне в строке. Поэтому для верстки галереи лучше подойдет inline-block:

Посмотреть демонстацию

Вывод

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

Использованные материалы и полезные ссылки по теме:

  • Tern Style: Float vs. Inline-Block
  • Vanseo Design: Should You Use Inline-Blocks As A Substitute For Floats?
  • CSS-Tricks.com: Fighting the Space Between Inline Block Elements

Теги:

  • css

Хабы:

  • Разработка веб-сайтов
  • CSS

Всего голосов 85: ↑63 и ↓22 +41

Комментарии 81

Кирилл @grokru

co-founder at Beau

Telegram

Понимание CSS Display: None, Block, Inline и Inline-Block | by Frontendly

4 min read

·

May 27, 2019

“silver laptop on table” by Alexandru Acea on Unsplash

Эта статья является адаптированным переводом статьи Understanding CSS Display: None, Block, Inline and Inline-Block.

Свойство display является одной из наиболее часто используемых функций CSS-разработки. Наша веб-страница рассматривает каждый HTML-элемент как блок и с помощью свойства display мы определяем, как будут отображаться эти блоки, или при необходимости скрывать их.

Свойство display задает поведение отображения элемента. — W3

Существуют различные значения свойства display . Я буду освещать следующие части в этой статье:

  • display: none vs visibility: hidden
  • display: block
  • display: inline
  • display: inline-block

Вы можете найти полный список отображаемых значений здесь .

Мы можем скрыть элементы, объявив значение display: none. Другой способ — объявить visibility: hidden, но между ними есть разница.

Чтобы показать разницу, давайте скроем одно из полей ниже:

Сначала я прячу синюю коробку (# box-2) с display: none

#box-2 {
display: none;
width: 100px;
height: 100px;
background: blue;
}
Display: none удаляет элемент

Наша синяя коробка теперь удалена из поля зрения. На самом деле она все еще существует в структуре HTML, но с display: none ведет себя так, как будто она полностью удалена. В результате зеленое поле занимает пустое место и автоматически перемещается влево.

В то же время, visibility: hidden не удаляет элемент полностью, он просто делает элемент невидимым:

#box-2 {
width: 100px;
height: 100px;
background: blue;
visibility: hidden;
}
Синяя коробка сейчас невидима, но она все еще там

Вы когда-нибудь замечали, что некоторые HTML-теги, такие как <div>, <p>, <ul>, занимают всю ширину и каждый начинается с новой строки, тогда как другим HTML-тегам, таким как <span>, <img> или <a> не нужна новая строка и они могут быть размещены рядом?

Это происходит из-за разного поведения свойства display: block или inline. Давайте посмотрим на разницу с коротким примером. Я создам шаблон HTML с тегами <p> и <span> без CSS:

<body>
<p>I'm a paragraph</p>
<p>I'm a paragraph too</p>
<span>I'm a word</span>
<span>I'm a word too.</span>
</body>
Свойство display по умолчанию с тегами <p> и <span>

Вы видите разницу? Каждый тег <p> начинается с новой строки, даже если места достаточно. Теги <span> остались рядом.

Каждый элемент HTML имеет значение display по умолчанию. — W3

По умолчанию элементы HTML имеют значения display как block или inline . Элементы, каждый из которых начинается с новой строки ( теги <p> в этом примере), называются блочными (block) элементами , а остальные элементы ( <span> ), которые можно размещать рядом, являются строчными (inline) элементами.

Есть несколько различных характеристик между блочными и строчными элементами:

Блочные элементы:

  • Всегда берётся полная ширина (100%) по умолчанию
  • Каждый элемент отображается в новой строке
  • свойства ширины и высоты могут быть установлены
  • Может содержать другие блочные или встроенные элементы

Так как теги <p> являются блочными элементами, свойства ширины и высоты могут быть установлены:

p {
height: 100px;
width: 100px;
background: red;
color: white;
}

Если бы здесь не была объявлена ​​ширина, то она по умолчанию была бы равна 100%. Тем не менее, я объявил ширину 100px, и следующий элемент <p> все равно начинается с новой строки:

Блочные элементы всегда начинаются новой строки

Строчные элементы:

  • Занимают место только столько, сколько им нужно
  • Отображаются рядом друг с другом
  • Не позволяют установить ширину или высоту, а также верхние нижние отступы (свойство margin)
  • Могут включать в себя другие строчные элементы

Мы можем менять поведение отображения элементов. Итак, давайте изменим свойство display тега <p> на inline:

p {
height: 100px;
width: 100px;
background: red;
color: white;
display: inline;
}

Поскольку наш тег <p> теперь является строчным элементом, они будут размещены рядом, а свойства width и height больше не будут действовать:

тег <p> как строчный элемент

В некоторых случаях оба значения display могут не удовлетворить потребности разработчика. Поэтому есть ещё одно значение свойства display которое делает выравнивание гораздо проще: display: inline-block .

Как мы можем понять из названия, display: inline-block включает в себя как характеристики строчных, так и блочных элементов.

Другими словами, мы можем спокойно установить свойства ширины и высоты и при этом элемент не будет начинаться с новой строки .

Для ясного понимания я задаю нашему тегу <p> значение inline-block:

p {
display: inline-block;
height: 100px;
width: 100px;
background: red;
color: white;
}

Теперь их можно размещать рядом, а также можно устанавливать свойства ширины и высоты:

Результат значения inline-block

Я надеюсь, что теперь вы лучше понимаете эти значения свойства display.

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею в социальных сетях. По любым вопросам, не стесняйтесь задавать их ниже в разделе комментариев.

Вы также можете посетить наш канал в Telegram.

CSS Inline vs Inline-Block vs Block

Хорошо, давайте переключим иллюстрацию на CSS. Помимо вопросов по алгоритму JavaScript, вам, как разработчику переднего плана, могут также задать вопросы, связанные с CSS. Итак, давайте удостоверимся, что вы готовы, и повысим уровень своих веб-основ!

Меня действительно спросили об этом на собеседовании. Я проходил собеседование на роль Front-end, поэтому готовился только к вопросам по алгоритмам. Так что я немного наткнулся на это 😰 Это лучшее из ошибок, у вас есть шанс извлечь из этого урок, чтобы не совершать их снова. Вот почему я всегда рекомендую людям обращаться в как можно больше мест. Интервью, как и любой навык, чем больше вы практикуетесь, тем лучше у вас получается. Теперь этот вопрос меня больше не беспокоит, потому что я буду готов! И вы тоже, давайте начнем!

  • а. встроенные
    • встроенные элементы
  • b. встроенный блок
  • c. блок
    • элементы блока
  • Объяснение в терминах, не связанных с разработкой
  • Окончательное решение
  • Ресурсы

a.

встроенный

Отображает элемент как встроенный элемент. Любые свойства высоты и ширины не будут иметь никакого эффекта.

Свойство display определяет поведение отображения элемента. Это необходимо знать для управления макетом элемента. Есть куча значений свойств. Но давайте начнем с основных встроенный .

Отображает элемент в строке или в той же строке. Другими словами, встроенные элементы НЕ начинаются с новой строки и занимают столько же ширины, сколько и их содержимое. Таким образом, если вы попытаетесь установить любую ширину и высоту, это не будет иметь никакого эффекта.

inline elements

Вот несколько элементов со свойством inline по умолчанию:

  • span
  • a 9 0010
  • изображение

И большинство тегов форматирования также по своей сути являются встроенными i

  • маленький

    • б.

    встроенный блок

    Отображает элемент как блочный контейнер встроенного уровня. Вы МОЖЕТЕ установить значения высоты и ширины.

    Хорошо, давайте перейдем к встроенному блоку . По сути то же самое, что и встроенный , за исключением того, что вы можете установить значения высоты и ширины.

    в.

    block

    Проверить длину строки

    До сих пор мы говорили о inline . Теперь давайте переключимся на противоположный ему блок . Помните, что встроенных элементов отображаются в одной строке. Ну, блок начинается с НОВОЙ строки и занимает всю доступную ширину. Это означает, что блочные элементы будут занимать всю ширину своего родительского элемента.

    block elements

    Вот несколько элементов, которые имеют свойство block по умолчанию:

    • div
    • h2 90 010
    • р
    • ли
    • секция

    Объяснено не разработчиками

    Представьте, что вы идете на концерт, у вас есть ряды сидений, правильно. Если вы назначите своему другу место inline , он сядет рядом с вами. Итак, дело с встроенных мест, дело в том, что все они представляют собой одно и то же физическое кресло. Вы не можете манипулировать креслом, чтобы сделать его больше или меньше. Один размер подходит всем, как они это называют!

    Теперь ваша подруга Дженнифер хочет присоединиться к вам, а потому что она дочь владельца стадиона. Ей назначается место рядного блока . Ну, она все еще может сидеть рядом с тобой. Потому что она «встроена» с вами (плохой каламбур, лол 😂), и, конечно же, вы хотите, чтобы она сидела рядом с вами. Однако, поскольку она дочь стадиона, ее мама хочет, чтобы ей было комфортно. Поэтому она дает ей специальное место, где ее стул настраивается и может быть отрегулирован, чтобы сделать его больше или меньше. Непотизм во всей красе 🤫

    Твоя одноклассница Анджелина тоже идет на концерт. Теперь твоя подруга Дженнифер не очень любит ее. Поэтому она просит маму выделить ей место в блоке . Таким образом, Анджелина не будет сидеть рядом с вами. Вместо этого она сидит в следующем ряду.

    Окончательное решение

    встроенный Элемент не начинается с новой строки и занимает только необходимую ширину. Вы не можете установить ширину или высоту.

    встроенный блок Отформатирован так же, как встроенный элемент, где он не начинается с новой строки. НО, вы можете установить значения ширины и высоты.

    блок Элемент будет начинаться с новой строки и занимать всю доступную ширину. И вы можете установить значения ширины и высоты.

    Вот изображение того, как выглядят все эти элементы diplay :

    Теперь, в вашем техническом интервью, вы можете получить вариант ответа на этот вопрос:

    • В чем разница между inline и block 90 030
    • В чем разница между встроенным и встроенный блок

    Но независимо от того, какой вариант, вы должны быть в состоянии решить их! Удачи на собеседовании. 0007 CSS-трюки: display

  • Inline vs Inline-Block Display в CSS

    • CSS Inline vs Inline-Block vs Block

    Хорошо, давайте переключим иллюстрацию на CSS. Помимо вопросов по алгоритму JavaScript, вам, как разработчику переднего плана, могут также задать вопросы, связанные с CSS. Итак, давайте удостоверимся, что вы готовы, и повысим уровень своих веб-основ!

    На самом деле меня спросили об этом во время интервью. Я проходил собеседование на роль Front-end, поэтому готовился только к вопросам по алгоритмам. Так что я немного наткнулся на это 😰 Это лучшее из ошибок, у вас есть шанс извлечь из этого урок, чтобы не совершать их снова. Вот почему я всегда рекомендую людям обращаться в как можно больше мест. Интервью, как и любой навык, чем больше вы практикуетесь, тем лучше у вас получается. Теперь этот вопрос меня больше не беспокоит, потому что я буду готов! И вы тоже, давайте начнем!

    • а. встроенные
      • встроенные элементы
    • b. встроенный блок
    • c. блок
      • элементы блока
    • Объяснение в терминах, не связанных с разработкой
    • Окончательное решение
    • Ресурсы

    a.

    встроенный

    Отображает элемент как встроенный элемент. Любые свойства высоты и ширины не будут иметь никакого эффекта.

    Свойство display определяет поведение отображения элемента. Это необходимо знать для управления макетом элемента. Есть куча значений свойств. Но давайте начнем с основных встроенный .

    Отображает элемент в строке или в той же строке. Другими словами, встроенные элементы НЕ начинаются с новой строки и занимают столько же ширины, сколько и их содержимое. Таким образом, если вы попытаетесь установить любую ширину и высоту, это не будет иметь никакого эффекта.

    inline elements

    Вот несколько элементов со свойством inline по умолчанию:

    • span
    • a 9 0010
    • изображение

    И большинство тегов форматирования также по своей сути являются встроенными i

  • маленький

    • б.

    встроенный блок

    Отображает элемент как блочный контейнер встроенного уровня. Вы МОЖЕТЕ установить значения высоты и ширины.

    Хорошо, давайте перейдем к встроенному блоку . По сути то же самое, что и встроенный , за исключением того, что вы можете установить значения высоты и ширины.

    в.

    block

    Проверить длину строки

    До сих пор мы говорили о inline . Теперь давайте переключимся на противоположный ему блок . Помните, что встроенных элементов отображаются в одной строке. Ну, блок начинается с НОВОЙ строки и занимает всю доступную ширину. Это означает, что блочные элементы будут занимать всю ширину своего родительского элемента.

    block elements

    Вот несколько элементов, которые имеют свойство block по умолчанию:

    • div
    • h2 90 010
    • р
    • ли
    • секция

    Объяснено не разработчиками

    Представьте, что вы идете на концерт, у вас есть ряды сидений, правильно. Если вы назначите своему другу место inline , он сядет рядом с вами. Итак, дело с встроенных мест, дело в том, что все они представляют собой одно и то же физическое кресло. Вы не можете манипулировать креслом, чтобы сделать его больше или меньше. Один размер подходит всем, как они это называют!

    Теперь ваша подруга Дженнифер хочет присоединиться к вам, а потому что она дочь владельца стадиона. Ей назначается место рядного блока . Ну, она все еще может сидеть рядом с тобой. Потому что она «встроена» с вами (плохой каламбур, лол 😂), и, конечно же, вы хотите, чтобы она сидела рядом с вами. Однако, поскольку она дочь стадиона, ее мама хочет, чтобы ей было комфортно. Поэтому она дает ей специальное место, где ее стул настраивается и может быть отрегулирован, чтобы сделать его больше или меньше. Непотизм во всей красе 🤫

    Твоя одноклассница Анджелина тоже идет на концерт. Теперь твоя подруга Дженнифер не очень любит ее. Поэтому она просит маму выделить ей место в блоке .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *