Чем отличаются элементы типа block, inline и inline-block?

В этом уроке мы с вами поговорим про самую базовую, но в то же время очень важную тему, посвященную разбору трех основных типов элементов, которые есть в HTML, это такие типы, как block, inline и inline-block. Здесь мы разберем отличие каждого типа друг от друга.

К сожалению, как показывает практика, многие новички не знают, в чем разница между этими типами, что в свою очередь приводит к написанию кучи ненужных CSS-стилей.

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

Урок 1.1 - Блочные элементы (block)

Блочные элементы - это самый распространенный тип, по умолчанию он дается для таких тегов, как div, h1 - h6, p, form, ul и др.

Урок 1.2 - Строчные элементы элементы (inline)

Строчные элементы являются полной противоположностью блочным элементам. Данному типу принадлежат теги, такие как span, a, em, strong, br и др.

Урок 1.3 - Строчно-блочные элементы (inline-block)

Строчно-блочный тип, это некий гибрид, который впитал в себя лучшие качества предыдущих двух типов. К нему можно отнести теги input, button, select, textarea.

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

В большинстве случаев, этот тип задают для элементов искусственно, с помощью свойства display.

.element {
    display: inline-block;
}

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

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

  • Огромное спасибо за этот урок! Для меня оказалось находкой и толчком к развитию! Интересно, Александр, вы проводите индивидуальные занятия?

  • Соглашусь со всем нижесказанным. Дар объяснять толково. По сути и не поверхностно. Чувствуется именно стремление объяснить, донести до слушателя, а не просто рассказать — кто понял-тот понял. Первый человек, за уроками которого я не засыпаю))))))

  • Спасибо, очень понятно и доступно.

  • 27.12.2015 12:03

    Спасибо за ясное и примерами богатое объяснение.

  • Александр, спасибо большое за полезный ресурс, тоже потихоньку учусь верстать и ваш сайт для меня просто находка!!! Скажите а вы где-то работаете верстальщиком или на фрилансе? И еще почему вы не поставите счетчик на сайт, интересно сколько посещают людей ресурс?

  • 14.10.2015 14:18

    Хороший материал. Вот так бы по полочкам все свойства разобрать.

  • Позновательно! Ещё бы свойство position так разобрать.