Блочные и строчные элементы в HTML
В HTML существует всего 2 типа элементов — блочные и строчные. Блочные элементы — те, которые занимают всю ширину страницы или контейнера. С помощью блоков можно создать хорошую структуру веб-страницы.
Строчные элементы — части веб-страницы, которые занимают не всю ширину контейнера, а только ширину расположенного в них контейнера. Они, как правило, используются для содержания одной небольшой части контента, в отличие от блочных.
Визуальное форматирование
Общая модель веб-страницы — своеобразный макет блоков, который позволяет увидеть их размеры. Он дает понятие о размерах блоков, их расположении, а также о размерах их содержимого.
В некоторых кодовых редакторах доступен просмотр визуальной модели, также можно обратиться к специальным разрешениям для браузеров. Просмотр такой модели позволит упростить верстку.
Блочная верстка
Блок — контейнер, в котором содержится различная информация, например, изображения, ссылки, текст и т.д. Он является их объединением и имеет свои размеры. К примеру, тег
У каждого блока есть граница, за которую не выходят элементы. По умолчанию граница не отображается, но это можно исправить с помощью CSS.
border: 3px solid #fff;
Это пример создания белой рамки со сплошной линией, ширина которой равна 3 пикселям.
Для всех блоков существуют внутренние и внешние отступы, которые задаются с помощью специальных свойств.
Padding — свойство для определения внутренних отступов (расстояние между содержимым блока и его границами). Важно! Если контейнер пустой, то содержимым является и пустая часть.
Margin — внешние отступы, позволяет задавать расстояние между блоками.
Для блочных элементов можно задать ширину и высоту:
.container{
width: 80%;
height: 50vh;
}Здесь создается контейнер с шириной в 80% от размеров экрана и половиной высоты экрана (1vh — 1% от высоты).
Существует огромное количество блочных элементов: <div>, <p>, <h2>, <h3>, <form>, <table>, <ul>, <ol> и так далее. Это далеко не все блоки, но они используются чаще всего.
Раньше для создания хорошей структуры элементов на странице пользовались тегами div, задавая им различные классы и id. Сейчас же, появились новые теги — <header>, <section>, <article>, <aside>, <footer>, <nav>. Эти теги стали новым стандартом в web.
Строчные элементы
Строчные элементы, либо же встроенные — части веб-страницы, которые содержат в себе какой-то контент, но не образуют блок шириной на весь внешний контейнер. Вот пример строчных элементов: <a>, <area>, <img>, <label>, <span>.
Строчные элементы — внутренние составляющие блочных контейнеров, в которых они расположены.
Для строчных блоков не работают свойства отступов и изменения размеров. Им нельзя задать ширину или высоту, нельзя поменять внутренние и внешние отступы. Их ширина и высота определяется по умолчанию, по величине внутреннего контента.
Если же сделать строчный элемент полублочным, то можно спокойно применять к нему свойства изменения ширины, высоты и отступов.
Блочно-строчные элементы
Полублочные элементы — элементы, которые по своим свойствам являются строчными. У них так же определяется высота и ширина.
Основное отличие полублочных элементов в том, что они поддаются изменениям ширины, высоты и отступов через CSS.
Изменение типа контейнера
По умолчанию, в html задается свойство, определяющее то, к какому разряду элементов они принадлежат. В CSS же, этот параметр можно изменить, с помощью свойства display.
.text{
display: inline;
}Здесь мы сделали так, что элемент с классом «text» стал строчным.
Свойство display имеет и другие значения:
display: inline-block - строчно-блочные элементы; display: block - блочные элементы;
Можно создавать и табличные элементы —
display: table|table-cell
Это не единственные табличные значения, всего их около 10.
Благодаря этой информации вы узнали отличия блочных и строчных элементов, а также смогли разобраться что такое inline-block. Теперь вы не будете ошибаться при создании блоков. По личному опыту знаем, что в начале обучения, возникают проблемы с визуальным оформлением блоков, особенно строчных.
Теги:Блочные и строчные элементы
До сих пор мы создавали элементы и даже не задумывались какой у них тип и почему они расположены именно так, а не иначе.
А вы не замечали почему некоторые элементы стоят в строку, а другие могут спокойно выстраиваться в ряд?
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
<a>Ссылка 1</a>
<a>Ссылка 2</a>
</body>
Ссылки стоят на одной строке, хотя в разметке не так:
Это происходит из-за того, что в HTML большинство элементов либо блочные либо строчные.
Строчные элементы
В примере выше тег ссылок — строчный элемент. Как мы можем наблюдать, ссылки расположены на одной строке, следовательно можно предлоположить, что строчные элементы пишутся на одной строке.
Примеры строчных элементов: картинки <img>, инпуты <input>, теги стилизации <b>, <strong> и т.д.
Элемент <span>
Элемент <span> — строчный элемент, который требует закрывающего тега. Частенько используется когда нужно обернуть текст чтобы сделать с ним что-то, например — изменить цвет.
<body>
<p>Это <span>красное</span> слово</p>
</body>
Результат:
Блочные элементы
Блочные — противоложоность строчным, они пишутся на новых строках.
Примеры блочных элементов: заголовки <h2>, тег параграфа <p>, форма <form>, списки <ul>, <ol>, <li> и т.д.
Элемент <div>
Элемент <div> — блочный элемент, который требует закрывающего тега. Полезность этого элемента сложно переоценить, ведь он используется очень часто в разных ситуациях и служит контейнером для других HTML элементов.
Позволяет писать CSS свойства прямо в теге. Это считается плохой практикой, поэтому мы опустим этот атрибут.
<body>
<div>
<h2>Заголовок содержимого</h2>
<p>Обычный текст</p>
</div>
<p>Текст вне контейнера</p>
</body>
В рамках текущего урока сделайте вот такой светофор из текста:
Маленькая подсказка: элемент div — основной блок, чтобы сделать ему такой задний фон пропишите в стили background-color: #111;
решение<div>
<h3 align="center">красный</h3>
<h3 align="center">жёлтый</h3>
<h3 align="center">зелёный</h3>
</div>
Помогайте другим!
Ниже находится секция с комментариями, мы призываем всех делиться своими знаниями по данной теме, помогать другим.
Так же Вы можете скидывать свои задачи и самые интересные мы обязательно опубликуем в уроке!
| Элемент | Краткое описание |
|---|---|
| <a> | Создает гиперссылку. |
| <abbr> | Определяет текст как аббревиатуру. |
| <audio> | Определяет звуковое содержимое. |
| <b> | Выделяет текст жирным шрифтом. |
| <bdo> | Определяет направление отображения текста. |
| <button> | Создает кнопку. |
| <canvas> | Определяет область для рисования графики. |
| <cite> | Определяет заголовок для работы — преобразует текст в курсивный. |
| <code> | Определяет кусок программного кода — преобразует текст в моноширинный. |
| <del> | Определяет текст, который был удален из документа — отображается перечеркнутым текстом. |
| <dfn> | Выделяет определения термина — преобразует шрифт в наклонный. |
| <em> | Определяет выделенный текст — преобразует текст в курсивный. |
| <i> | Преобразует текст в курсивный. |
| <iframe> | Определяет встроенный frame. |
| <img> | Определяет изображение. |
| <input> | Создаeт поле для ввода данных. |
| <ins> | Определяет текст, который был добавлен в документ — отображает текст подчеркнутым. |
| <kbd> | Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный. |
| <mark> | Определяет важную часть текста. |
| <meter> | Определяет скалярное измерение в пределах известного диапазона. |
| <q> | Определяет короткую цитату. |
| <rp> | Определяет, что показывать браузеру, который не поддерживает тег <ruby>. |
| <rt> | Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>. |
| <s> | |
| <samp> | Определяет текст, который является результатом вывода компьютерной программы. |
| <small> | Определяет текст маленького размера. |
| <select> | Создает выпадающий список. |
| <span> | Определяет строчный элемент документа. |
| <strong> | Определяет важный текст — преобразует шрифт в полужирный. |
| <sub> | Определяет текст в нижнем индексе. |
| <sup> | Определяет текст в верхнем индексе. |
| <td> | Создает ячейку таблицы. |
| <textarea> | Создает многострочное текстовое поле. |
| <th> | Создает заголовочную ячейку в таблице. |
| <var> | Определяет переменную — выделяет текст курсивом. |
| <video> | Добавляет на страницу видео файл. |
| Элемент | Краткое описание |
|---|---|
| <a> | Создает гиперссылку. |
| <abbr> | Определяет текст как аббревиатуру. |
| <audio> | Определяет звуковое содержимое. |
| <b> | Выделяет текст жирным шрифтом. |
| <bdo> | Определяет направление отображения текста. |
| <button> | Создает кнопку. |
| <canvas> | Определяет область для рисования графики. |
| <cite> | Определяет заголовок для работы — преобразует текст в курсивный. |
| <code> | Определяет кусок программного кода — преобразует текст в моноширинный. |
| <del> | Определяет текст, который был удален из документа — отображается перечеркнутым текстом. |
| <dfn> | Выделяет определения термина — преобразует шрифт в наклонный. |
| <em> | Определяет выделенный текст — преобразует текст в курсивный. |
| <i> | Преобразует текст в курсивный. |
| <iframe> | Определяет встроенный frame. |
| <img> | Определяет изображение. |
| <input> | Создаeт поле для ввода данных. |
| <ins> | Определяет текст, который был добавлен в документ — отображает текст подчеркнутым. |
| <kbd> | Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный. |
| <mark> | Определяет важную часть текста. |
| <meter> | Определяет скалярное измерение в пределах известного диапазона. |
| <q> | Определяет короткую цитату. |
| <rp> | Определяет, что показывать браузеру, который не поддерживает тег <ruby>. |
| <rt> | Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>. |
| <s> | Определяет текст, который больше не является правильным — отображает текст перечеркнутым. |
| <samp> | Определяет текст, который является результатом вывода компьютерной программы. |
| <small> | Определяет текст маленького размера. |
| <select> | Создает выпадающий список. |
| <span> | Определяет строчный элемент документа. |
| <strong> | Определяет важный текст — преобразует шрифт в полужирный. |
| <sub> | Определяет текст в нижнем индексе. |
| <sup> | Определяет текст в верхнем индексе. |
| <td> | Создает ячейку таблицы. |
| <textarea> | Создает многострочное текстовое поле. |
| <th> | Создает заголовочную ячейку в таблице. |
| <var> | Определяет переменную — выделяет текст курсивом. |
| <video> | Добавляет на страницу видео файл. |
| Элемент | Краткое описание |
| <address> | Определяет контактную информацию автора документа/статьи. |
| <artical> | Определяет текст как статью, новость и др. |
| <aside> | Определяет контент в стороне от содержимого страницы. |
| <blockquote> | Выделяет текст с другого источника, как блочную цитату. |
| <dd> | Создает описание элемента в списке определений. |
| <div> | Определяет раздел документа. |
| <dl> | Создает список определений. |
| <dt> | Определяет термин в списке определений. |
| <figure> | Группирует элементы страницы. |
| <footer> | Нижняя часть документа. |
| <form> | Определяет HTML форму. |
| <h2> — <h6> | Определяют HTML заголовки. |
| <header> | Задает «шапку» сайта или раздела. |
| <hr> | Создает горизонтальную линию. |
| <li> | Определяет элемент списка. |
| <nav> | Определяет группу ссылок для навигации. |
| <ol> | Создает нумерованный(упорядоченный) список. |
| <p> | Определяет абзац. |
| <pre> | Оставляет содержимое в первоначальном виде. |
| <ruby> | Определяет небольшую аннотацию (для типографии Восточной Азии). |
| <section> | Определяет разделы документа. |
| <table> | Создает таблицу. |
| <tr> | Создает строку в таблице. |
| <ul> | Определяет маркированный(неупорядоченный) список. |
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