Что такое блок в html

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div> .

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

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

Каждый HTML элемент имеет отображаемое значение по умолчанию в зависимости от типа элемента.

Есть два значения отображения: блочное (block) и встроенное (inline).

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

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

Пример

Это блочные элементы в HTML:

Встроенные элементы (строчные)

Встроенный элемент не начинается с новой строки, и он занимает лишь столько ширины, сколько нужно.

Это <span> элемент внутри параграфа.

Пример

Это встроенные элементы в HTML:

Примечание: Встроенный элемент не может содержать в себе блочный элемент!

Элемент <div>

Элемент <div> часто используется как контейнер для других элементов HTML.

Элемент <div> не имеет обязательных атрибутов, но style , class и id являются общими.

При использовании вместе с CSS элемент <div> может использоваться для стилизации блоков содержимого:

Пример

Элемент <span>

Элемент <span> — это встроенный контейнер, используемый для разметки части текста или части документа.

Элемент <span> не имеет обязательных атрибутов, но style , class и id являются общими.

При использовании вместе с CSS элемент <span> можно использовать для стилизации частей текста:

Пример

Резюме

• Есть два значения отображения: блочное и встроенное
• Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину
• Встроенный элемент не начинается с новой строки, и он занимает лишь столько ширины, сколько необходимо
• Элемент <div> является блочным и часто используется как контейнер для других элементов HTML
• Элемент <span> — это встроенный контейнер, который используется для разметки части текста или части документа

HTML теги

Тег	Описание
<div>	Определяет раздел в документе (блочный элемент)
<span>	Определяет раздел в документе (встроенный элемент)

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

• Какие есть способы отображения HTML-элементов на веб-странице?
• Какой HTML-элемент начинается с новой строки и занимает всю доступную ширину на странице?
• Какой HTML-элемент не начинается с новой строки и занимает лишь столько ширины, сколько нужно?
• Каким элементом является элемент <div> ?
• Каким элементом является элемент <span> ?
• Может ли встроенный элемент включать в себя блочный элемент?
• Может ли блочный элемент включать в себя встроенный элемент?
• Для чего чаще всего используется HTML-элемент <div> ?
• Для чего чаще всего используется HTML-элемент <span> ?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Блочная модель

В CSS мы, говоря упрощённо, имеем два типа элементов — блочные и строчные. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.

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

• Начнётся с новой строки.
• Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
• Будут применяться свойства width и height .
• Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.

Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <h1> ) и <p> , все используют block как свой внешний тип отображения по умолчанию.

Если элемент имеет тип отображения inline (строчный), то:

• Он не будет начинаться с новой строки.
• Свойства width и height не будут применяться.
• Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
• Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.

Элемент <a> , используемый для ссылок, <span> , <em> и <strong> — всё это примеры по умолчанию строчных элементов.

Тип отображения, применяемый к элементу, определяется значениями свойства display , такими как block и inline , и относится к внешнему значению display .

Экскурс: внутренний и внешний типы отображения

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

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

Однако мы можем изменить внутренний тип отображения, используя такие значения display как flex . Если мы установим display: flex; для элемента, внешний тип отображения примет значение block , но внутренний тип изменится на flex . Любые прямые дочерние элементы этого блока станут flex-объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.

Примечание: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN Блочное и строчное расположение (en-US) .

Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите flex и другие внутренние значения, которые могут быть у ваших элементов, например grid .

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

Примеры разных типов отображения

Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения block . Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.

Второй — это список, который свёрстан с использованием display: flex . Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.

Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <span> . Эти элементы по умолчанию имеют тип inline , однако у одного из них задан класс block, для которого мы установили display: block .

Мы можем видеть, как строчные элементы ( inline ) ведут себя в следующем примере. Элементы <span> в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.

У нас также есть элемент <ul> , для которого установлено display: inline-flex , что создаёт строчный элемент вокруг нескольких flex-объектов.

Наконец, у нас есть два абзаца, для которых установлено display: inline . И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.

В примере вы можете заменить display: inline на display: block или display: inline-flex на display: flex для переключения между этими двумя режимами отображения.

Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства display может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.

В оставшейся части урока мы сосредоточимся на внешнем типе отображения.

Что такое блочная модель CSS?

Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.

Составляющие элемента

Составляя блочный элемент в CSS мы имеем:

• Содержимое: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как width и height .
• Внутренний отступ: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью padding и связанных свойств.
• Рамка: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью border и связанных свойств.
• Внешний отступ: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью margin и связанных свойств.

Рисунок ниже показывает эти слои:

Стандартная блочная модель CSS

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

Предположим, что в элементе есть следующий CSS определяющий width , height , margin , border , и padding :

Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.

Примечание: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.

Альтернативная блочная модель CSS

Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).

По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство box-sizing: border-box . С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.

Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство box-sizing для элемента <html> , затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью the CSS Tricks article on box-sizing.

Примечание: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.

Играем с блочными моделями

В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box , который даёт им одинаковые параметры width , height , margin , border , и padding . Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.

Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?

Примечание: вы можете найти решение этой задачи здесь.

Использование инструментов разработчика в браузере для просмотра блочных моделей

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

Внешние, внутренние отступы и рамки

Вы уже видели свойства margin , padding и border в работе в приведённом выше примере. Используемые в этом примере свойства — сокращённые и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.

Давайте рассмотрим эти свойства более подробно.

Внешний отступ (margin)

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

Мы можем контролировать все поля элемента сразу, используя свойство margin , или каждую сторону индивидуально, используя эквивалентные полные свойства:

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

Схлопывание внешних отступов

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

В примере ниже есть два абзаца. Первому абзацу задан margin-bottom 50 пикселей. У второго абзаца margin-top 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.

Вы можете проверить это, установив второму абзацу margin-top равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в margin-bottom первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.

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

Рамка

Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям width и height элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему width и height .

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

Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство border .

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

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

Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:

В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.

Внутренний отступ (padding)

Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.

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

Если вы измените значения padding для класса .box в примере ниже, то увидите, что это изменяет положение текста внутри элемента.

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

Блочная модель и строчные элементы

Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к <span> .

В приведённом ниже примере у нас есть <span> внутри абзаца, и мы применили к нему width , height , margin , border и padding . Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.

Использование display: inline-block

Существует особое значение display , которое представляет собой золотую середину между inline и block . Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял width и height и избегал перекрытия, показанного выше.

Элемент с display: inline-block применяет ряд свойств блочного элемента, о которых мы уже знаем:

• Применяются свойства width и height .
• Использование padding , margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.

Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства width и height .

В следующем примере мы добавили display: inline-block к нашему элементу <span> . Попробуйте изменить значение свойства на display: block или полностью удалить строку, чтобы увидеть разницу.

Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив padding . <a> — это строчный элемент, такой же как <span> ; вы можете использовать display: inline-block , чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.

Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <a> , потому что хотим, чтобы background-color изменялся при наведении курсора на <a> . Отступы перекрывают рамку элемента <ul> . Это происходит потому, что <a> — строчный элемент.

Добавьте в правило display: inline-block с помощью селектора .links-list a , и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.

Проверьте свои навыки!

В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. Проверка своих навыков: блочная модель (en-US) .

Заключение

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

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

Understanding HTML Block and Inline Elements: A Learning Journey to Web Development

Hello everyone! Welcome back to the learning journey again! We’ve covered almost all of the major aspects of HTML already and soon we going to start learning CSS. But before we begin learning CSS, I want to discuss a little bit about HTML Block and Inline elements. I think it’ll help us a lot for a better understanding of CSS. So let’s begin!

N.B. This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join us there.

Block and Inline Elements

We know what an HTML element is, right? We’ve learned it in Basic to code in HTML post. Go ahead and read that first if you need a refresher.

So, HTML element can generally be of two types. They are Inline elements and Block elements. This two type of element is a bit different from each other for their specific kind of behavior.

Block Level Element

Elements that takes up the entire space of its parent element (container) is a Block level element. That’s the one sentence definition of Block level elements. Let’s break it down!

Most of the HTML element on a web page are formed as a rectangle. They sit one after another vertically and creates the structure of the web page. These rectangles take the entire space of the screen from left to right.

Now, the data or text we pass into these elements doesn’t always fill up all the space of its rectangle. The behavior of Block level element is that it takes up all the space of its rectangle anyway. Which means, it doesn’t let other elements use the empty space of its own rectangle. In other words, It blocks all the space it gets in its line.

Let me show you an example which will make it clear.

So, I’ve created an h1 heading and a simple paragraph. I’ve added background color to them to help you see how much space they are occupying. And as you can see, even though the content of the heading and paragraph isn’t taking much space, the elements still taking up or, blocking all the space from left to right.

And also for the same reason, the paragraph has created on a new line. If the heading element only took the space it needed to show it’s content, then the paragraph could be accommodated on that same line.

Characteristics of Block Level Elements:

• Block level elements always starts on a new line
• Block level element can have customized margin and padding
• Block level element can contain other block level element or Inline-level element
• If the width is not manually set, A block level element always takes up full width of its container
• If the height isn’t manually set, Block level element’s height is adjusted automatically to fit all the content and other elements within itself.

Example

Most of the element of HTML is Block level element. Including: <h1> through <h6>, <p>, <div>, <form>, <header>, <footer>, <ul>, <ol>, <li> and so on. A full list of block-level element can be found here.

Inline-Level Element

If you’ve understood the concept of Block level element, then understanding inline elements is easy. Unlike block level elements, Inline elements don’t take up all the space of its container. It usually sits within other elements and only takes as much space as it’s content needs. And thus, you can have multiple Inline elements in the same line.

Let’s get straight to example:

So now, I have added some inline elements within that same HTML file. In the heading, I’ve added <em> tag for the word lonely and in the paragraph, I’ve added two <strong> element for the words still and anyone.

Notice how they are sitting within those block level elements and still not breaking anything. From their background color, you can also see that they are taking space only as much as their content needs. In the paragraph, There are two inline elements on the same line.

Characteristics of Inline Level Elements:

• An inline element doesn’t require a new line to start. It can work within an existing line of content.
• Top & bottom margin can not be applied to inline elements (Unless they are converted to block level element via CSS)
• Inline-level elements can only contain data or other inline level elements.

Example:

Some of the inline element is: <a>, <em>, <strong>, <span>, <img>, <input>, <button>, <code> etc. A full list can be found here.

Replaced Elements

In the beginning of this article, I’ve said HTML element can generally be of two types. But there are a few elements that neither falls completely under the characteristics of block level elements nor under inline level elements. These elements are called Replaced element. They are rarely mentioned and you might not need to know much about them. But I think it’s still worth knowing.

Simply put, Replaced elements are elements whose content is replaced by some kind of external resources. And as the content comes from outside, the height and width of the element are also determined by that external resource.

Replaced elements generally show most of the characteristics of inline elements and hence they are often considered as inline elements. You might not ever encounter anything regarding replaced element unless you’re trying some super advanced stuff.

Example:

The example of replaced elements is: <img>, <video>, <input>, <br>, <hr>, <textarea> etc.

Conclusion

I think this is going to be the last post for basic HTML. We’re going to start learning basic CSS from next post. Things are about to get more exciting!

So, feel free to ask me anything about HTML. If there’s anything I didn’t write about and you feel like you need a detailed explanation, let me know. I might write a post on that. Leave your comment below.

Be sure to share this post on your social networks.

Practice everything we learned about HTML and keep mistaking until I come back with basic CSS lessons. 🙂

This post was originally published here on UXArt blog. You can poke me here if you want to.