—»     —»   Чем отличается «block» от «inline»
  Раздел: CSS/Style Sheets   Комментариев: 5  

Чем отличается «block» от «inline»



Для того чтобы организовать правильное оформление страниц за счет каскадных таблиц стилей, элементы могут быть разделены на несколько категорий. Из этих категорий мы хотели бы выделить две: блочные элементы (block-level) и строчные элементы (inline).

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

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

Блочный элемент представляет собой элемент, который обладает (но не ограничен ими, тем не мене) следующими характеристиками:

* Без указанного значения ширины он естественным образом растягивается на весь родительский контейнер
* Может быть оформлен полями (margin) или отступами (padding)
* Без указанного значения высоты он естественным образом растягивается до размера, нужного для размещения внутри него дочерних элементов (предположим, что они не выравнены по какому-либо краю или у них не указано позиционирование)
* По умолчанию данный элемент будет расположен ниже предыдущего в разметке элемента (предположим, что окружающие элементы не выравнены по какому-либо краю или у них не указано позиционирование)
* Игнорирует параметр vertical-align

То есть блочному элементу не обязательно задавать значения ширины или указывать значение в 100%, если вам нужно, чтобы элемент растягивался по горизонтали. Более того, это даже может вызвать некоторые нестыковки и непредвиденные проблемы.

И, как гласит 4 пункт списка, приведенного выше, также не обязательно «вычищать» блочный элемент; если предположительно блочный элемент не выравнен по какому-либо краю, то он будет очищен автоматически и отобразится на следующей «строке» по течению разметки страницы.

Примеры блочных элементов:

<p>
<div>
<form>
<header>
<nav>
<ul>
<li>
<h1>

Чем отличается «block» от «inline»

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

Строчные элементы обладают (но не ограничены ими, тем не мене) следующими характеристиками:

* Простирается вместе с текстовым контентом
* Не будет очищать предыдущий контент для того, чтобы перейти на следующую строку (как блочные элементы)
* Подвержен параметру white-space в CSS
* Игнорирует параметры верхнего и нижнего поля (margin), но принимает поля по левой и правой сторонам, а также отступы (padding)
* Игнорирует значения высоты и ширины
* Если выравнен по левому или правому краю, автоматически станет блочным элементом, обладающим всеми характеристиками блочных элементов
* Подвержен параметру vertical-align

Самый простой способ представить строчный элемент, это подумать о том, как если бы блок ведёт себя как текст. Что случается, например, с текстом, если он не разделен другими элементами? Символ следует за символом. Если вы вставите строчный элемент в текст, то он будет вести себя как будто отрывок текста.

Примеры строчных элементов:

<a>
<span>
<b>
<em>
<i>
<cite>
<mark>
<code>

Чем отличается «block» от «inline»

Что следует знать

Нужно заметить, что примеры как блочных, так и строчных элементов вполне содержательные: блочные элементы являются структурными, в то время как строчные больше основаны на тексте. Это отличный способ запомнить, что есть что, хотя поначалу вы всё равно будете путаться.

Короче говоря, вы можете разместить любой блочный элемент внутри другого блочного. Вы также можете разместить строчный элемент внутри блочного элемента, и любой строчный внутри другого строчного. Но вы не можете разместить блочный элемент внутрь строчного, за одним лишь исключением – вы можете обернуть элемент «a» вокруг любого контента, будь то блочный, строчный или совмещенный элемент.

У вас есть возможность изменить любой блочный элемент на строчный, и обратно. Все это реализуется с помощью параметра display. Так что, не забывайте про это в нужные моменты. Но не стоит использовать неправильный элемент в неправильном месте. Помнится нам случай, когда «сведущий» владелец веб-сайта хотел, чтобы разработчики использовали элемент «h2» и оформили его так, будто это обычный текст, и поместили его в элемент paragraph, чтобы, таким образом, быстрее добиться результатов в поисковых системах. Не очень хорошая идея, так как для этих целей есть элемент «em».

И в завершение нужно отметить тот факт, что, хотя со стороны CSS и существуют блочные и строчные элементы, со стороны HTML5 стоит обратить внимание на некоторые изменения в сортировке элементов и быть уверенным в том, что не существует более подходящего элемента для того, чтобы использовать его там, где вы используете только те, о которых вы знаете. Подробнее об этом можно узнать в спецификации WHATWG HTML5.

Дополнительно: замещенные элементы

В самом начале мы говорили, что блочные и строчные элементы – это всего лишь два типа контента. Правильнее будет назвать их основными типами, и не стоит сильно переживать по поводу остальных типов.

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

Здесь, наверное, не стоит расписывать детальное объяснение. Вы можете ознакомиться со статьей SitePoint, на которую в предыдущем абзаце была ссылка. Но давайте посмотрим на некоторые примеры замещенных элементов:

<img>
<object>
<input>
<select>

Заключение

Если вы только начинаете работать с CSS, то понимание принципов блочных и строчных элементов в значительной степени расширит ваши навыки и знания.

Вопросы?

Данная статья не претендует на лучшее руководство, поэтому, если у вас возникли какие-либо вопросы, не стесняйтесь задавать их посредством поля комментариев ниже.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 9648   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 февраля 2012 @ 12:13
Написал: Руслан — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Статья превосходная! Все доступно для понимания! Уверен, новички ее оценят)
Комментарий #2: 3 февраля 2012 @ 14:06
Написал: mihdan — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
margin - поле
padding - отступ

Откуда "маржи"?
Комментарий #3: 3 февраля 2012 @ 14:17
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
mihdan, поправлено.
Комментарий #4: 3 февраля 2012 @ 15:42
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Честно говоря я даже и не знал, что можно заниматься страницей на таком уровне, думаю, что мне это весьма пригодиться - опробую. Спасибо!
Комментарий #5: 4 февраля 2012 @ 21:47
Написал: artradix.com — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
«block» от «inline» правильное использование дает неплохой результат :)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031