Чем отличаются элементы типа 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;
}

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (6)

Эдуард 3 октября 2016 г. в 16:31

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

Ответить

Андрей 24 января 2016 г. в 08:02

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

Ответить

Darius 27 декабря 2015 г. в 12:03

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

Ответить

Виталий 1 ноября 2015 г. в 21:00

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

Ответить

arq12 14 октября 2015 г. в 14:18

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

Ответить

Святослав 14 октября 2015 г. в 13:34

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад