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


Содержание

Типы элементов

До сих пор мы создавали элементы и даже не задумывались какой у них тип и почему они расположены именно так, а не иначе.

А вы не замечали почему некоторые элементы стоят в строку, а другие могут спокойно выстраиваться в ряд?

Ссылки стоят на одной строке, хотя в разметке не так:

Это происходит из-за того, что в HTML большинство элементов либо блочные либо строчные.

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

В примере выше тег ссылок — строчный элемент. Как мы можем наблюдать, ссылки расположены на одной строке, следовательно можно предлоположить, что строчные элементы пишутся на одной строке.

Примеры строчных элементов: картинки , инпуты , теги стилизации , и т.д.

Элемент

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

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

Блочные — противоложоность строчным, они пишутся на новых строках.

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

, форма , списки

    ,
      , и т.д.

Элемент

Позволяет писать CSS свойства прямо в теге. Это считается плохой практикой, поэтому мы опустим этот атрибут.

Задачи

Светофор

В рамках текущего урока сделайте вот такой светофор из текста:

Маленькая подсказка: элемент div — основной блок, чтобы сделать ему такой задний фон пропишите в стили background-color: #111;

Помогайте другим!

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

HTML :: Блочные и строчные элементы

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

Прежде, чем двигаться дальше, хотелось бы отдельно обратить внимание на еще два признака, по которым мы будем делить большинство элементов html -разметки. Дело в том, что при отображении элементов браузеры по умолчанию применяют к ним свойства CSS , имеющие заранее определенные значения. Одним из таких важных свойств является display, которое отвечает за то, как элемент будет отображаться при показе в документе. Значений у данного свойства достаточно много, но пока что нас будут интересовать только два из них: inline и block . Остальные значения мы рассмотрим в процессе изучения CSS .

(от англ. block) мы будем называть элемент, у которого свойство display по умолчанию устанавливается браузером как block . Такой элемент отображается браузером на веб-странице в виде прямоугольника, ширина которого равна максимально доступному в данной ситуации размеру, а высота определяется объемом его содержимого. Кроме того, блочные элементы отделяются от остального содержимого разрывами строк до и после элемента.

Одним из таких элементов является известный нам ‘Абзац’ . На его примере мы и посмотрим, как же отображаются блочные элементы браузерами. Для этого создадим страницу с двумя абзацами, имеющими разный фон. Оформление фона и шрифта зададим при помощи атрибута style и значений атрибута, соответственно, в виде свойств CSS : color и background-color, которым присвоим разные цвета для наглядности. Исходный код показан в примере №1.

Пример №1. Код страницы, содержащей два блочных элемента ‘Абзац’

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

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

(от англ. inline) мы будем называть элемент, у которого свойство display по умолчанию устанавливается браузером как inline . Такой элемент отображается браузером на веб-странице как часть строки, а его ширина определяется объемом содержимого.

Чтобы было понятней, рассмотрим код с применением строчных элементов (см. пример №2).

Пример №2. Код страницы, содержащей два строчных элемента ‘span’

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

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

Блочные и строчные элементы

Познакомившись со многими HTML-элементами можно заметить, что их поведение не всегда одинаковое — некоторые элементы (параграфы, списки, pre , div , заголовки, таблицы) всегда начинаются с новой строки. Они занимают всю ширину экрана. Такие элементы называются блочными. Они являются основой вёрстки HTML, так как они напрямую воздействуют на то, как будет расположен элементы рядом с ними на странице.

Помимо блочных элементов существуют строчные элементы. К ним относятся ссылки ( a ), теги начертания текста ( b , strong , i , em ), картинки, span . Они не влияют на расположение соседних элементов элементов и предназначены для придания смысловой нагрузки. В отличии от блочных элементов, строчные не занимают всю ширину экрана.

Параграф является блочным элементом.

Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.

Span является строчным элементом. Он занимает ширину равной ширине своего контента, поэтому переноса строки нет

Задание

Добавьте два тега span с тектом внутри. Посмотрите, как они будут расположены

Упражнение доступно только авторизованным пользователям.

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


Урок 9. Блочные и строчные элементы HTML

Как Вы поняли из заголовка, в HTML элементы делятся на блочные и строчные.

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

Все просто: блочный элемент — это элемент, который представляет из себя блок. Блок по умолчанию занимает всю ширину родительского элемента. А высота блочного элемента по умолчанию равна 0, поэтому если блок пустой (в нем нет ни текста, ни изображения) или, Вы не задали ему конкретную высоту, то Вы не увидите его на странице.

Сразу к примеру. Если у Вас есть 4 блока

Результат будет следующим:

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

Основные блочные элементы:

— заголовки на странице

— здесь размещают основное содержимое элемента. На веб-странице должен быть только один элемент

Строчные боксы

Строчные боксы — противоположность блочных. Строчные боксы располагаются друг за другом в одной строке, могут разрываться и находиться на нескольких строках:

Особенности строчных боксов:

  1. До и после строчного бокса отсутствуют переносы строки.
  2. Ширина и высота строчного бокса зависит только от его содержания, задать размеры с помощью CSS нельзя.
  3. Можно задавать только горизонтальные отступы.

Теги со строчным боксом по умолчанию: , , , и так далее.

Эти теги предназначены для оформления текста на уровне небольших фраз и отдельных слов.

А теги с блочным боксом, напротив, предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.

Хотите верстать адаптивно и по методологии, использовать препроцессоры и автоматизацию? Записывайтесь на профессиональный курс по вёрстке второго уровня, проходящий c 4 ноября 2020 по 22 января 2020. Цена 20 900

  • index.html Сплит-режим
  • style.css Сплит-режим

Строчные боксы

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

Строчные элементы HTML5 — полный список

HTML Есть два вида HTML элементов — блочные и строчные элементы.

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

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

Дальше перечислен полный список строчных элементов (тегов) HTML, включая элементы HTML5.

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

* отмечены элементы, которые появились в HTML5

Основы html. Общие правила. Блочные и строчные элементы. Строчные элементы

По аналогии с блочными элементами перечислю их характерные особенности.

  • Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
  • Эффект схлопывания отступов не действует.
  • Свойства, связанные с размерами (width , height ) не применимы.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align .

Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег , который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

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

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

Пример 3.16. Применение тега

Лягте животом на пол . Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения мышц живота . Задержитесь на две секунды. Выполните восемь повторений.

Блочная и строчная модель в CSS

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

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

На веб-странице любому HTML элементу соответствует определённая прямоугольная область (блок). Во время рендеринга браузер определяет размеры и положение этих блоков, а также определяет их CSS свойства, чтобы применить их и отобразить на экране.


В CSS создана специальная блочная модель (англ. box model), которая описывает, из чего состоит любой блок и от каких свойств зависят его размеры. В этой модели каждый блок состоит из четырёх областей:

  • margin (внешние отступы).
  • border (граница элемента).
  • padding (внутренние отступы).
  • content (содержимое).

Рис. 74 Блочная модель CSS.

Внутренняя область (content area) – может содержать текст, изображения и другие теги, расположенные внутри содержимого. По умолчанию, размер внутренней области с содержимым задается свойствами width (ширина), min-width (минимальная ширина), max-width (максимальная ширина), height (высота), min-height (минимальная высота) и max-height (максимальная высота). Далее в учебнике мы рассмотрим, как и зачем изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

Внутренние отступы или поля элемента (padding area) – по сути это пустая область, которая окружает внутреннюю область (контент). Размеры внутренних отступов могут задаваться как для всех сторон элемента, так и по отдельности с различных сторон содержимого.

Область рамки или границы элемента (border area) – окружает внутренние отступы элемента (padding area). Ширина, цвет и стиль границы может задаваться как для всех сторон элемента, так и по отдельности для каждой стороны.

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

Теперь, когда Вы понимаете, на чем строится блочная модель CSS, пришло время рассмотреть каждую область элемента более детально.

Внешние и внутренние отступы элемента

Как мы с Вами установили выше, внутренние и внешние отступы добавляют промежуток вокруг содержимого элементов. Для управления этими отступами и отделения одного элемента от другого в CSS используется два универсальных свойства — margin для внешних отступов и padding для внутренних.

Давайте рассмотрим пример, в котором установим для первого изображения внутренние отступы, а для другого внешние отступы и посмотрим, что из этого выйдет:

Как вы можете заметить на изображении ниже, свойства padding (внутренние отступы) и margin (внешние отступы) визуально дают один и тот же эффект:

Рис. 75 Пример использования внешних и внутренних отступов в CSS.

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

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

Рис. 76 Отличие внешних и внутренних отступов в CSS.

Для управления внутренними и внешними отступами вы можете использовать любые единицы измерения CSS. Ранее в статье учебника «Единицы измерения CSS, размер шрифта» мы уже с вами рассматривали, какие единицы измерения более предпочтительны к использованию.

В вышерассмотренных примерах мы использовали универсальные свойства, которые задают отступы для всех сторон, мы к ним еще вернемся позднее, а сейчас хотелось бы продемонстрировать Вам, что в CSS допускается задавать отступы по отдельности для каждой из сторон. Для этих целей существует по 4 (четыре) CSS свойства для внутренних и внешних отступов, их легко запомнить, так как достаточно через дефис добавить к «универсальному свойству» название необходимой стороны:

Для внутренних отступов:

  • padding-top (определяет внутренний отступ сверху).
  • padding-right (определяет внутренний отступ справа).
  • padding-bottom (определяет внутренний отступ снизу).
  • padding-left (определяет внутренний отступ слева).

Для внешних отступов:

  • margin-top (определяет внешний отступ сверху).
  • margin-right (определяет внешний отступ справа).
  • margin-bottom (определяет внешний отступ снизу).
  • margin-left (определяет внешний отступ слева).

Давайте рассмотрим пример, в котором мы зададим внешний отступ для элемента, используя при этом процентные значения:

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

Значит, внешний отступ от левого края каждого изображения составит:

Размер изображения высчитывается по аналогии:

Данный пример нам дает адаптивность, так как если вы захотите изменить размер окна браузера, то размер изображений и размер внешних отступов тоже изменится в зависимости от ширины контейнера (блока). Что касается высоты (height), то браузер вычисляет её самостоятельно (значение этого свойства по умолчанию — auto ).

Рис. 77 Указание внешних отступов в процентах в CSS.

Мы не просто так начали изучение внешних и внутренних отступов, используя универсальные свойства margin и padding. Почему универсальные? Все просто, мы можем быстро установить значения отступов для всех четырех параметров одновременно в одном объявлении, при этом значения мы можем указывать совершенно разные, главное при этом соблюдать определённый порядок. Зачастую удобнее указать все свойства в одном объявлении, чем использовать для каждой стороны по отдельности свое свойство.

Давайте рассмотрим на примере указания значений для внутренних отступов:

При указании четырёх значений ( 5px 10px 15px 20px ) — порядок расстановки внутренних отступов будет следующий: Top ( 5px ) — Right ( 10px ) — Bottom ( 15px ) — Left ( 20px ).

Справочно: Для запоминания порядка расстановки внутренних отступов в одном объявлении рекомендуют использовать английское слово TRouBLe(где: T — top, R — right, B — bottom, L — left).

При указании трёх значений ( 5px 10px 15px ) — порядок расстановки внутренних отступов будет следующий: Top ( 5px ) — Right & Left ( 10px ) – Bottom ( 15px ).

При указании двух значений ( 5px 10px ) — первое значение ( 5px ) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе ( 10px ) значение — внутренние отступы слева и справа содержимого элемента.

При указании одного значения ( 5px ) — внутренний отступ со всех сторон будет одного размера — 5px .

Обращаю Ваше внимание, что если вам необходимо задать для какой-либо стороны нулевое значение, то единицы измерения при этом указывать не нужно. Например, укажем 1em для внутреннего отступа с левой и правой стороны, а для верха и низа зададим 0 (отсутствие отступа):

Как вы можете догадаться, для внешних отступов (margin) синтаксис аналогичен внутренним отступам (padding), давайте сразу рассмотрим на следующем примере:

В данном примере используется практически все, что вам надо знать для работы с внешними отступами. И так, что мы сделали в этом примере:

  • Создали групповой селектор в котором указали размеры для наших блоков (ширина и высота 50px ).
  • В демонстративных целях для заголовка мы указали следующий порядок расстановки внешних отступов: Top ( 15px ) — Right & Left ( 20% ) — Bottom ( 2em ). Для класса .primer1 мы задали величину внешних отступов со всех сторон одного размера 2em .
  • Для класса .primer2 мы задали первым значением ( 25px ) размер внешнего отступа от верха и от низа, второе значение 75px – внешние отступы слева и справа.
  • Порядок расстановки внешних отступов для класса .primer3 будет следующим: Top ( — 40px ) — Right ( 25px ) — Bottom ( 25px ) — Left ( 100px ). В классе .primer3 мы использовали отрицательное значение внешнего отступа сверху, что привело к наслоению на предыдущий блок.

Обращаю Ваше внимание, что допускается использовать отрицательные значения для внешних отступов (margin). Для внутренних отступов (padding) отрицательные значения использовать не допускается.

Результат нашего примера:

Рис.78 Пример указания внешних отступов для элемента.


Нюансы работы с внешними отступами в CSS

Одной важной особенностью работы с отступами является то, что внешние отступы двух соседних элементов, расположенные друг над другом (вертикально) или вложенные друг в друга, могут накладываться. Браузеры вместо того, чтобы произвести расчеты по объединению значений внешних отступов, просто выбирают большее значение из них.

В данном примере мы указываем для класса .primer1 значение нижнего внешнего отступа равным 10px , а для второго класса .primer2 значение верхнего внешнего отступа 20px . После этого мы разместили два абзаца (HTML тег

) один под другим и задали им наши классы.

По логике расстояние между ними должно быть 30px ( 10px внешнего отступа снизу с первого класса + 20px внешнего отступа сверху второго элемента), а по факту мы получили отступ 20px , так как браузер выбрал большее. Обязательно при верстке учитывайте этот момент.

Как вы можете заметить значение отступа снизу у второго абзаца равно 16px — это значение, которое установлено браузером по умолчанию.

Рис. 79 Пример указания внешних отступов (нюансы применения).

Чтобы обойти такие конфликты, можно было использовать для одного из абзацев не внешние, а внутренние отступы (CSS свойство padding).

Строчные (линейные) элементы

Мы с Вами разобрали, что все браузеры обрабатывают элементы на веб-странице подобно блочному элементу, на самом деле не все так однозначно.

В CSS существует два типа элементов:

  • блочные
  • строчные / линейные (inline)

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

Что касается строчных (inline) элементов, то они не создают разрывов строк перед элементами и после них, а отображаются в одной строке с содержимым. Например, вы форматируете слово из предложения элементом (определяет жирное начертание текста), то это слово по-прежнему будет располагаться на одной строке с текстом, который, заключен в блочный элемент

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

Давайте рассмотрим пример:

Мы добавили внутренние и внешние отступы со всех сторон по 50px , установили границу и задний фон к строчному элементу. Что мы видим в результате:

  1. Через установку верхнего или нижнего отступа увеличить высоту строчного элемента не получится.
  2. Браузер добавляет отступы только с левой и правой сторон элемента.
  3. Задний фон и граница элемента наслаивается на соседний элемент (см. 1 пункт).

Результат нашего примера:

Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.

Но как говорится на каждую хитрую строку найдется свой display : inline-block :

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

Результат нашего примера:

Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.

Свойство display имеет очень широкое применение, ведь благодаря ему, мы можем заставить строчные элементы вести себя как блочные, или наоборот блочные элементы сделать строчными, и даже сделать элементы резиновыми (флекс), но об этом позднее.

Чтобы установить, что элемент будет восприниматься браузером как строчный, то необходимо использовать следующее объявление:

Для того чтобы установить, что элемент будет восприниматься браузером как блочный, то необходимо использовать следующее объявление:

Забегая вперед, хочу сказать, что вы сможете свойством display со значением none при необходимости скрывать тот или иной элемент в зависимости от разрешения, или устройства пользователя (адаптивный дизайн). Кроме того, это свойство активно применяется при работе различных скриптов.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла) в любую папку на вашем жестком диске:
  • Используя полученные знания составьте следующую страницу (создание вертикального меню навигации):

    Практическое задание № 20.

    Подсказка: чтобы сформировать подобное меню Вам необходимо воспользоваться маркированным списком. Подробную информацию о использовании маркированных списков Вы сможете найти в предыдущей статье учебника «Работа со списками в CSS». Подумайте, что необходимо сделать, чтобы Вы смогли указать для гиперссылок внутренние отступы, и не забудьте указать, что при наведении на них цвет заднего фона меняется на orangered.

    Продвинутое задание (создание горизонтального меню навигации):

    Практическое задание № 21.

    Подсказка: подумайте, что необходимо сделать с элеметами маркированного списка, чтобы они выстроились в линейку?

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

    Блочные и строчные элементы

    В языке HTML выделяют две основные категории элементов. данные категории соответствуют типам их содержимого и поведению в структуре веб-страницы. Это блочные и строчные элементы. Блочные элементы используются для создания структуры страницы. Строчные же используются для форматирования текстовых фрагментов веб-страницы.

    Весь HTML документ организован в виде дерева элементов. В то же время модель CSS представляет собой алгоритм, обрабатывающий HTML документ. Каждый блок в дереве — это соответствующий элемент или псевдоэлемент.

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

    Факторы определяющие положение блоков на странице:

    • размер элемента;
    • тип элемента (строчный или блочный);
    • отношение между элементами DOM;
    • схема позиционирования;
    • внешняя информация (размер окна браузера);
    • размер внутренних изображений.

    Блочные элементы и контейнеры

    Блочные элементы — это элементы высшего уровня. Они форматируются визуально как блоки. Располагаются такие элементы на странице в окне браузера вертикально. Свойство display со значениями block, list-item, table делают элемент блочным.

    Блочные и встроенные элементы

    Очевидно вы уже заметили, что элементы заголовков

    начинаются с новой строки. Это происходит потому, что они являются примерами блочных элементов различных уровней. Браузеры рассматривают блочные элементы так, словно они заключены в маленькие прямоугольные области – блоки, из которых складываются страницы. По умолчанию каждый блочный элемент начинается с новой строки и, как правило, ограничен сверху и снизу пустыми строками.
    В следующем примере границы блочных элементов выделены зеленым цветом:

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

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

    занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками

    начинается с новой строки, а встроенный элемент не начинается с новой строки, а остается в составе абзаца

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

    Разница между блочными и строчными элементами следующая:

    • Строчные элементы не могут хранить блочные элементы, а могут содержать только данные или другие строчные элементы.
    • Блочные элементы могут содержать другие блочные элементы, строчные элементы, а также данные.
    • Блочные элементы всегда начинаются с новой строки и, как правило, ограничены сверху и снизу пустыми строками.
    • Блочные элементы занимают всю ширину родительского элемента, например, окна браузера.
    • Строчные элементы занимают ширину равную их содержимому плюс значения отступов, полей и границ.
    Илон Маск рекомендует:  Атрибут name в HTML
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL