Блочные элементы — Веб-технологии для разработчиков
Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
<p>Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.</p>
CSS
p { background-color: #8ABB55; }
Использование
- Блочные элементы могут отображаться только внутри элемента
<body>и его потомков.
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
- Содержание
- Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
- Форматирование по умолчанию
- По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.
Элементы
Ниже приведен полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).
<address>- Контактная информация.
<article>HTML5- Содержание статьи.
<aside>HTML5- Побочное содержание.
<blockquote>- Длинная («блочная») цитата.
<details>HTML5- Раскрывающийся блок с подробностями.
<dialog>HTML5- Диалоговое окно.
<dd>- Описание определения.
<div>- Фрагмент документа.
<dl>- Список определений.
<dt>- Термин в списке определений.
<fieldset>- Группирование элементов формы.
<figcaption>HTML5- Описание для тега
<figure>. <figure>HTML5- Группирование медиа-контента с подписью (см.
<figcaption>). <footer>HTML5- Нижняя часть («подвал») раздела или страницы.
<form>- Форма ввода.
<h2>,<h3>,<h4>,<h5>,<h5>,<h6>- Заголовки от первого до шестого уровня.
<header>HTML5- Верхняя часть («шапка») раздела или страницы.
<hgroup>HTML5- Группирование заголовков раздела или страницы.
<hr>- Горизонтальная разделительная линия.
<li>- Пункт списка.
<main>HTML5- Содержит основной контент, уникальный для страницы.
<nav>HTML5- Содержит навигационные ссылки.
<ol>- Упорядоченный список.
<p>- Текстовый абзац.
<pre>- Предварительно форматированный текст.
<section>HTML5- Раздел веб-страницы.
<table>- Таблица.
<ul>- Неупорядоченный список.
Смотрите также
display | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
| Значение | Описание | IE6 | IE7 | IE8 | Cr2 | Cr8 | Op9.2 | Op10 | Sa3.1 | Sa5 | Fx3 | Fx4 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. | |||||||||||
| inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. | |||||||||||
| inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. | |||||||||||
| inline-table | Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. | |||||||||||
| list-item | Элемент выводится как блочный и добавляется маркер списка. | |||||||||||
| none | Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. | |||||||||||
| run-in | Устанавливает элемент как блочный или встроенный в зависимости от контекста. | |||||||||||
| table | Определяет, что элемент является блочной таблицей подобно использованию тега <table>. | |||||||||||
| table-caption | Задает заголовок таблицы подобно применению тега <caption>. | |||||||||||
| table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>). | |||||||||||
| table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <col>. | |||||||||||
| table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>. | |||||||||||
| table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>. | |||||||||||
| table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>. | |||||||||||
| table-row | Элемент отображается как строка таблицы (тег <tr>). | |||||||||||
| table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>. |
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display</title>
<style>
.example {
border: dashed 1px #634f36; /* Параметры рамки */
background: #fffff5; /* Цвет фона */
font-family: "Courier New", Courier, monospace; /* Шрифт текста */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em; /* Отступы вокруг */
}
.exampleTitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как встроенный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер текста */
margin: 0; /* Убираем отступы вокруг */
white-space: nowrap; /* Отменяем переносы текста */
}
</style>
</head>
<body>
<p>Пример</p>
<p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>
<html><br>
<body><br>
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>
SO<sub><small>4</small>
</sub></i><br>
</body><br>
</html></p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById(«elementID»).style.display
Браузеры
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
- для элементов <li> понимает значение block как list-item;
- значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для тега <col>;
- значение table-column-group поддерживается только для тега <colgroup>.
Chrome 2.0, а также Safari версии 3 и старше, iOS:
- значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.
Safari 3.1
- Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.
Блочные и строчные элементы | Учебные курсы
В HTML вам, в основном, будут попадаться два типа элементов HTML.
Блочные элементы, вроде:
- абзацы <р>;
- списки: неупорядоченные (с маркером) <ul> или упорядоченные списки (с числами) <ol>;
- заголовки: от первого уровня <h2> до шестого уровня <h6>;
- статьи <article>;
- разделы <section>;
- длинные цитаты <blockquote>.
Строчные элементы, вроде:
- ссылки <a>;
- выделенные слова <em>;
- важные слова <strong>;
- короткие цитаты <q>;
- аббревиатуры <abbr>.
Блочные элементы предназначены для структурирования основных частей вашей страницы, путём разделения содержимого на логически связанные блоки.
Строчные элементы предназначены, чтобы разграничить часть текста и придать ему определённую функцию или смысл. Строчные элементы, как правило, содержат одно или несколько слов.
<p>Вы уже видели это <a href="http://www.youtube.com">замечательное видео</a> на YouTube?</p>Открывающие и закрывающие теги
Все блочные элементы содержат открывающие и закрывающие теги.
Как результат, самозакрывающие элементы являются строчными, просто потому, что их синтаксис не позволяет им содержать любой другой элемент HTML.
| Содержит открывающие и закрывающие теги | Самозакрывающие | |
| Блочные элементы | <p> </p> <ul> </ul> <ol> </ol> | Невозможно |
| Строчные элементы | <a> </a> <strong> </strong> <em> </em> | <input> <br> <img> |
Другие типы элементов HTML
Есть несколько исключений у блочных/строчных элементов. Вот те, с которыми вы чаще всего столкнётесь:
- пункты списка <li>;
- таблица <table>;
- строки таблицы <tr>;
- ячейки таблицы <td>.
Автор и редакторы
Автор: Джереми Томас
Последнее изменение: 13.08.2017
Редакторы: Влад Мержевич
CSS блочная модель
Модуль CSS Box Model описывает свойства padding и margin, которые создают поля внутри и отступы снаружи CSS блока. Размеры блока также могут быть увеличены за счет рамки.
Каждый блок имеет прямоугольную область содержимого в центре, поля вокруг содержимого, рамку вокруг полей и отступ за пределами рамки. Размеры этих областей определяют свойства padding и его подсвойства — padding-left, padding-topи т.д., border и его подсвойства, margin и его подсвойства.
CSS блочная модель в деталях
1. Определение блочной модели
Каждый блок имеет область содержимого, в которой находится текст, дочерние элементы, изображение и т.п., и необязательные окружающие ее padding, border и margin. Размер каждой области определяется соответствующими свойствами и может быть нулевым, или, в случае margin, отрицательным.
margin
padding
borderобласть содержимого
- край содержимого
- край поля
- край рамки
- край отступа
Поля, рамка и отступы могут быть разбиты на верхний, правый, нижний и левый сегменты, каждый из которых независимо управляется своим соответствующим свойством.
Фон области содержимого, полей и рамки блока определяется свойствами фона. Область рамки может быть дополнительно окрашена с помощью свойства border. Отступы элемента всегда прозрачны, что позволяет показывать фон родительского элемента.
Так как поля и отступы элемента не являются обязательными, по умолчанию их значение равно нулю. Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей. Очистить стили браузеров для всех элементов можно при помощи универсального селектора:
* {
margin: 0;
padding: 0;
}2. Отступы элемента
Отступы окружают край рамки элемента, обеспечивая расстояние между соседними блоками. Свойства отступов определяют их толщину. Применяются ко всем элементам, кроме внутренних элементов таблицы. Сокращенное свойство margin задает отступы для всех четырех сторон, а его подсвойства задают отступ только для соответствующей стороны.
Смежные вертикальные отступы элементов в блочной модели схлопываются.
2.1. Схлопывание вертикальных отступов
Смежные вертикальные отступы двух или более элементов уровня блока margin объединяются (перекрываются). При этом ширина общего отступа равна ширине большего из исходных. Исключение составляют отступы корневого элемента, которые не схлопываются.
Область содержимого
margin-bottom: 30px; width: 100%; display: inline-block;
Область содержимого
margin-top: 15px; width: 100%; display: inline-block;
Объединение отступов выполняется только для блочных элементов в нормальном потоке документа. Если среди схлопывающихся отступов есть отрицательные значения, то браузер добавит отрицательное значение к положительному, а полученный результат и будет расстоянием между элементами. Если положительных отступов нет, то максимум абсолютных значений соседних отступов вычитается из нуля.
Отступы не схлопываются:
- Между плавающим блоком и любым другим блоком;
- У плавающих элементов и элементов со значением overflow, отличным от visible, со своими дочерними элементами в потоке;
- У абсолютно позиционированных элементов, даже с их дочерними элементами;
- У строчно-блочных элементов.
Для предотвращения проблемы схлопывания рекомендуется задавать для всех элементов только верхний или нижний margin.
2.2. Выпадание вертикальных отступов
Если внутри одного блока расположить другой блок и задать ему margin-top, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent.
2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left
Свойства устанавливают верхний, правый, нижний и левый отступ блока элемента соответственно. Отрицательные значения допускаются, но могут существовать ограничения для конкретной реализации.
Свойства не наследуются.
| margin-top/margin-right/margin-bottom/margin-left | |
|---|---|
| Значения: | |
| длина | Размер отступа задается в единицах длины, например, px, in, em. Значение по умолчанию 0. |
| % | Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента. |
| auto | Для элементов уровня строки, плавающих (float) значения margin-left или margin-right вычисляются в 0. Если для элементов уровня блока задано margin-left: auto или margin-right: auto — соответствующее поле расширяется до края содержащего блока, если оба — их значения становятся равными, что горизонтально центрирует элемент относительно краев содержащего блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
margin-top: 20px;
margin-right: 1em;
margin-bottom: 5%;
margin-left: auto;
margin-top: inherit;
margin-right: initial;2.4. Краткая запись отступов: свойство margin
Свойство margin является сокращенным свойством для установки margin-top, margin-right, margin-bottom и margin-left в одном объявлении.
Если существует только одно значение, оно применяется ко всем сторонам.
Если два — верхний и нижний отступы устанавливаются на первое значение, а правый и левый — устанавливаются на второе.
Если имеется три значения — верхний отступ устанавливается на первое значение, левый и правый — на второе, а нижний — на третье.
Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.
3. Поля элемента
Область полей представляет собой пространство между краем области содержимого и рамкой элемента. Свойства полей определяют толщину их области. Применяются ко всем элементам, кроме внутренних элементов таблицы (за исключением ячеек таблицы). Сокращенное свойство padding задает поля для всех четырех сторон, а подсвойства устанавливают только их соответствующие стороны.
Фоны элемента по умолчанию закрашивают поля элемента и пространство под его рамкой. Это поведение можно настроить с помощью свойств background-origin и background-clip.
3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left
Свойства устанавливают верхнее, правое, нижнее и левое поля соответственно. Отрицательные значения недопустимы.
Свойства не наследуются.
| padding-top/padding-right/padding-bottom/padding-left | |
|---|---|
| Значения: | |
| длина | Поля элемента задаются при помощи единиц длины, например, px, pt, cm. Значение по умолчанию 0. |
| % | Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Поля сверху и снизу равны полям слева и справа, т.е. верхние и нижние поля тоже вычисляются относительно ширины элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 2cm;
padding-left: 10%;
padding-top: inherit;
padding-bottom: initial;3.2. Краткая запись полей: свойство padding
Свойство padding является сокращенным свойством для установки padding-top, padding-right, padding-bottom и padding-left в одном объявлении.
Если существует только одно значение, оно применяется ко всем сторонам.
Если есть два значения, верхнее и нижнее поля устанавливаются на первое значение, а правое и левое — на второе.
Если имеется три значения, верхнее поле устанавливается на первое значение, левое и правое — на второе, а нижнее — на третье.
Если есть четыре значения — они применяются сверху, справа, снизу и слева соответственно.
4. Рамки элемента
Рамки элемента заполняют область рамок, визуально очерчивая края блока. Свойства рамок определяют толщину области границы блока, а также ее стиль и цвет.
По материалам CSS Box Model Module Level 3
Строчно-блочные элементы | Учебные курсы
Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 1 состоит из секций, в которые входит изображение с подписью к нему, при этом секции выстраиваются по горизонтали, занимая всю доступную ширину. При уменьшении окна браузера секции переходят на другую строку.
Рис. 1. Галерея фотографий
Если для формирования секций использовать блочный элемент, то он будет каждый раз начинаться с новой строки. Для строчных элементов нельзя задавать размеры всей секции. Одним из решений является применение строчно-блочных элементов, которые сочетают преимущества строчных и блочных элементов.
Строчно-блочный элемент можно определить, задав ему в стилях свойство display со значением inline-block.
div {
display: inline-block;
}Кроме того, в HTML существует ряд элементов, для которых значение inline-block задано по умолчанию: <button>, <input>, <textarea>, <select>.
Характеристики этих элементов следующие.
- Высота и ширина элемента вычисляется браузером автоматически, исходя из содержимого блока.
- Размеры содержимого можно устанавливать через свойства width и height.
- Ширина блока получается сложением значений width, margin, border и padding.
- Высота блока получается сложением значений height, margin, border и padding.
- Несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
- Элементы можно выравнивать по вертикали с помощью свойства vertical-align.
- Перенос текста считается за пробел.
Чтобы создать галерею, представленную на рис. 1, в стилях для figure следует задать значение display как inline-block, а внутрь элемента <figure> добавить изображение и подпись к нему через <figcaption> (пример 1).
Пример 1. Создание галереи
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Галерея</title> <style> .photo { background: #d9dabb; /* Цвет фона */ width: 150px; /* Ширина */ margin: 0 10px 10px 0; /* Отступы справа и снизу */ padding: 10px 0; /* Поля сверху и снизу */ text-align: center; /* Выравнивание по центру */ display: inline-block; /* Строчно-блочный элемент */ vertical-align: top; /* Выравнивание по верхнему краю */ } .photo img { border: 2px solid #8b8e4b; /* Параметры рамки */ } </style> </head> <body> <figure> <img src=»image/thumb1.jpg»> <figcaption>Софийский собор</figcaption> </figure> <figure> <img src=»image/thumb2.jpg»> <figcaption>Польский костёл</figcaption> </figure> <figure> <img src=»image/thumb3.jpg»> <figcaption>Купеческий клуб</figcaption> </figure> <figure> <img src=»image/thumb4.jpg»> <figcaption>Памятник Св. Владимиру</figcaption> </figure> </body> </html>Обратите внимание, что высота секций различается, поскольку в стилях высота никак не ограничена, в отличие от ширины. Выравнивание секций можно установить через свойство vertical-align, в данном примере выравнивание делается по верхнему краю с помощью значения top.
Строчно-блочные элементы также применяются для создания макетов веб-страниц. В качестве примера возьмём трёхколоночный макет, ширина колонок задаётся в процентах (пример 2).
Пример 2. Макет из трёх колонок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Макет</title> <style> section { display: inline-block; /* Строчно-блочный элемент */ vertical-align: top; /* Выравнивание по верхнему краю */ min-height: 200px; /* Минимальная высота колонок */ box-sizing: border-box; /* Алгоритм расчёта ширины */ padding: 15px; /* Поля вокруг текста */ } .col1 { width: 20%; /* Ширина первой колонки */ background: #C8EAF5; /* Цвет фона первой колонки */ } .col2 { width: 40%; /* Ширина второй колонки */ background: #FEE4CD; /* Цвет фона второй колонки */ } .col3 { width: 40%; /* Ширина третьей колонки */ background: #E2EDC1; /* Цвет фона третьей колонки */ } </style> </head> <body> <main> <section>Колонка 1</section> <section>Колонка 2</section> <section>Колонка 3</section> </main> </body> </html>Колонки создаём с помощью элементов <section> и в стилях для каждой колонки устанавливаем свойство display со значением inline-block, а также задаём выравнивание по верхнему краю через vertical-align. Поскольку padding оказывает влияние на ширину блока, то для упрощения добавляем box-sizing со значением border-box. После этого свойство width определяет уже ширину всего блока, а не его содержимого, как раньше.
Если посмотреть на результат примера (рис. 2), то последняя колонка оказывается где-то внизу и между колонок появился небольшой промежуток.
Рис. 2. Перенос колонки на другую строку
Это связано с особенностью строчных элементов, что перенос текста в коде воспринимается как пробел. Соответственно, этот пробел и виден между колонок, он же и оказывает влияние на общую ширину макета, что и приводит к переносу последней колонки на новую строку. Ей просто не хватает места.
Способов борьбы с этой особенностью несколько, они связаны как с редактирование кода HTML, так и воздействием через CSS. В HTML всё сводится к тому, чтобы не стало пробелов между закрывающим и открывающим тегами. Перечислим некоторые популярные методы.
Перенос атрибутов в <section> на другую строку.
<section>Колонка 1</section><section
class="col2">Колонка 2</section><section
class="col3">Колонка 3</section>В HTML допустимо переносить закрывающую угловую скобку.
<section>Колонка 1</section
><section>Колонка 2</section
><section>Колонка 3</section>Перенос текста внутри <section>.
<section>Колонка 1</section><section>
Колонка 2</section><section>Колонка 3</section>Использование комментариев в HTML.
<section>Колонка 1</section><!--
--><section>Колонка 2</section><!--
--><section>Колонка 3</section>Один из изящных способов борьбы с пробелом в HTML — использование комментариев. Это позволяет сохранить структуру кода без дополнительных переносов.
В CSS тоже есть несколько методов.
Отрицательный margin-right или margin-left. Способ не очень универсальный, поскольку величина отступа зависит от размера шрифта и настроек браузера.
section {
margin-right: -4px;
}Нулевой размер шрифта. Для родительского элемента <main> ставим нулевое значение font-size, а затем для <section> возвращаем его в желаемое значение.
main {
font-size: 0;
}
section {
font-size: 16px;
}После этих манипуляций с HTML или CSS колонки выстраиваются нужным нам образом (рис. 3).
Рис. 3. Макет из трёх колонок
Блочные и строчные элементы HTML. Свойство display CSS — учебник CSS
В HTML существует два типа элементов — блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.
Блочные элементы
Блочные элементы являются основой, которая используется для верстки веб-страниц. Такой элемент представляет собой прямоугольник, который по умолчанию занимает всю доступную ширину страницы (если иное значение не указано в CSS), а длина элемента зависит от его содержимого. Такой элемент всегда начинается с новой строки, то есть, располагается под предыдущим элементом. Блочный элемент может содержать в себе другие блочные и строчные элементы.
Примеры блочных элементов: <div>, <p>, <ul>, <ol>, <h2> и т. д.
Строчные элементы
В отличие от блочного, строчный элемент не переносится на новую строку, а располагается на той же строке, что и предыдущий элемент. Такие элементы, как правило, находятся внутри блочных элементов и их ширина зависит лишь от содержимого и настроек CSS. Еще одно отличие строчного элемента от блочного заключается к том, что в нем может находиться только контент и другие строчные элементы. Блочные элементы в строчные вкладывать нельзя.
Примеры строчных элементов: <a>, <span>, <strong>, <em>, <img> и т. д.
Блочные и строчные элементы HTML
Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента.
CSS-свойство display: меняем тип элемента
При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:
display: inline;
Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:
display: block;
Действие {display:inline} и {display:block}
Также можно сделать «гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:
display: inline-block;
Действие {display:inline-block}
Далее в учебнике: свойство CSS border. Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.
— Веб-технологии для разработчиков
Описание
HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом <cite>.
Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос.
Атрибуты
Для данного элемента доступны глобальные атрибуты.
cite- URL, указывающий на исходный документ или сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата.
Пример
<blockquote cite="http://developer.mozilla.org"> <p>This is a quotation taken from the Mozilla Developer Center.</p> </blockquote>
Результат:
This is a quotation taken from the Mozilla Developer Center.
Спецификации
Поддержка браузерами
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Да) | 1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Да) | 1.0 (1.0) | (Да) | (Да) | (Да) |
Примечание
Чтобы изменить отступ элемента <blockquote>, используйте CSS-свойство margin.
Для коротких цитат используйте элемент <q>.
Смотрите также
- Элемент
<q>для встроенных (строковых) цитат. - Элемент
<cite>для указания источника.
HTML-тег blockquote
Пример
Раздел, цитируемый из другого источника:
Вот уже 50 лет WWF защищает будущее природы. Всемирный фонд дикой природы, ведущая в мире природоохранная организация, работает в 100 странах, и его поддерживают 1,2 миллиона членов в США и около 5 миллионов во всем мире.
Попробуй сам »Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег
определяет раздел, цитируемый из другого источника.Браузеры обычно делают отступ
элементов (см. пример ниже, чтобы узнать, как удалить отступ).Советы и примечания
Совет: Используйте
для встроенных (коротких) цитат.Поддержка браузера
Элемент Есть Есть Есть Есть Есть Атрибуты
Атрибут Значение Описание цитировать URL Указывает источник предложения Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.Другие примеры
Пример
Используйте CSS, чтобы удалить отступ из элемента цитаты:
цитата {
поле слева: 0;
}
Вот цитата из WWF сайт:
За 50 лет WWF защищал будущее природы. Ведущая в мире консервация организации, WWF работает в 100 странах и получает поддержку 1,2 миллиона членов в Соединенных Штатах и около 5 миллионов во всем мире.