Строчные элементы и блочные – Какие из этих html тегов относятся к блочным а какие к строчным элементам? — Хабр Q&A

Блочные и строчные элементы HTML. Свойство display CSS — учебник CSS

В HTML существует два типа элементов — блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.
 

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

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

Примеры блочных элементов: <div>, <p>, <ul>, <ol>, <h2> и т. д.
 

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

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

Примеры строчных элементов: <a>, <span>, <strong>, <em>, <img> и т. д.
 

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

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


Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента.

CSS-свойство display: меняем тип элемента

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


display: inline;

Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:


display: block;

 

Значения display:inline и display:block

Действие {display:inline} и {display:block}


 

Также можно сделать «гибрид» — блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:


display: inline-block;

 

Свойство display:inline-block

Действие {display:inline-block}


 

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

Блочные и строчные html теги

Все HTML элементы делятся на две группы:

  • блочные (block)
  • строчные (inline)

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

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

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

блочные и строчные html теги

Строчные теги

ТегКраткое описание
<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>Cоздает описание элемента в списке определений.
<div>Определяет раздел документа.
<dl>Создает список определений.
<dt>Oпределяет термин в списке определений.
<figure>Группирует элементы страницы.
<footer>Нижняя часть документа.
<form>Определяет HTML форму.
<h2> - <h6>Определяют HTML заголовки.
<header>Задает "шапку" сайта или раздела.
<hr>Создает горизонтальную линию.
<li>Определяет элемент списка.
<nav>Определяет группу ссылок для навигации.
<ol>Создает нумерованный(упорядоченный) список.
<p>Определяет абзац.
<pre>Оставляет содержимое в первоначальном виде.
<ruby>Определяет небольшую аннотацию (для типографии Восточной Азии).
<section>Определяет разделы документа.
<table>Создает таблицу.
<tr>Создает строку в таблице.
<ul>Определяет маркированный(неупорядоченный) список.

Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.

HTML - Строчные и блочные элементы

Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.

Дефолтные стили браузера и их нормализация

Каждый браузер имеет дефолтные стили (user agent stylesheet). Эти стили задают оформление, которые HTML элементы имеют по умолчанию.

Т.е., если в браузере открыть HTML документ без привязанного к нему CSS кода, то он уже будет каким-то образом оформлен. Это базовое оформление задаётся с использованием стилей браузера.

Но в разных браузерах дефолтные стили могут быть различными.

Например, одном в браузере некоторый элемент может иметь одно оформление, а в другом другое.

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

Для того чтобы нормализовать стили, которые отличаются в разных браузерах можно использовать Normalize.css.


<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Normalize CSS -->
    <link rel="stylesheet" href="normalize.css">
    <title>Normalize CSS</title>
  </head>
  <body>

  </body>
</html>

После подключения этого файла все элементы в HTML документе будут отображаться более согласовано и в соответствии со современными стандартами.

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

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

Тем не менее, это разделение никуда не делось, сейчас мы просто понимаем под этим стилевое отображение (значение CSS свойства display) которое элемент имеет по умолчанию. Т.е. строчный элемент – это элемент, который по умолчанию имеет display: inline, а блочный тот у которого по умолчанию display: block.

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

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

Строчным элементам нельзя установить размеры (width и height), задать верхние и нижние margin отступы.

Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.

Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.

Примеры элементов, которые имеют display: inline по умолчанию: <a>, <abbr>, <audio>, <b>, <bdo>, <button>, <canvas>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <mark>, <meter>, <q>, <s>, <samp>, <small>, <select>, <span>, <strong>, <sub>, <sup>, <td>, <textarea>, <th>, <var>, <video>.

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

Например:
Можно использовать строчный элемент <strong> чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.

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

Блочные элементы (block)

Блочные элементы в отличие от строчных элементов занимают по умолчанию всю ширину блока-контейнера, в которую они помещены. По этому признаку можно легко определить, к какому способу отображения относится элемент. Высота блочного элемента по умолчанию определяется автоматически и зависит от содержимого, которое в него помещено. Блочный элемент можно представить как прямоугольник, который имеет ширину (width) и высоту (height). Ширину и (или) высоту блочного элемента можно задавать вручную с помощью CSS свойств width и (или) height. Также блочные элементы имеют границы, которые можно оформлять с помощью стилей CSS. Кроме этого блочным элементам можно задавать отступы внешние и внутренние. Внешний отступ (margin) – это отступ от границы до элемента контейнера или до соседних блочных элементов. Внутренний отступ (padding) – это отступ для содержимого блока, который задаётся от границы.

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

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


<div>
  <!-- Отступ по 10px со всех сторон от границы блока до его содержимого  -->
  <div>Содержимое блочного элемента.</div>
</div>

Lorem ipsum dolor sit amet. Ipsa, quae ab illo inventore veritatis et dolorum fuga amet consectetur. Assumenda est, omnis voluptas sit amet. Hic tenetur a sapiente delectus, ut perspiciatis, unde omnis. Id est laborum et quas molestias excepturi sint. Id est et voluptates repudiandae sint. Vero eos et iusto odio dignissimos ducimus, qui blanditiis praesentium. Dolores et quasi architecto beatae vitae dicta sunt, explicabo quia. Necessitatibus saepe eveniet, ut et aut odit aut reiciendis voluptatibus. Praesentium voluptatum deleniti atque corrupti, quos dolores et voluptates repudiandae sint. Sapiente delectus, ut aut perferendis. Non numquam eius modi tempora incidunt. Veritatis et aut odit aut fugit, sed quia.


<div>
  <!-- Внутренний отступ: сверху и снизу - 10px, слева и справа - 20px -->
  <div>Содержимое блочного элемента.</div>
</div>

Lorem ipsum dolor sit amet. Ipsa, quae ab illo inventore veritatis et dolorum fuga amet consectetur. Assumenda est, omnis voluptas sit amet. Hic tenetur a sapiente delectus, ut perspiciatis, unde omnis. Id est laborum et quas molestias excepturi sint. Id est et voluptates repudiandae sint. Vero eos et iusto odio dignissimos ducimus, qui blanditiis praesentium. Dolores et quasi architecto beatae vitae dicta sunt, explicabo quia. Necessitatibus saepe eveniet, ut et aut odit aut reiciendis voluptatibus. Praesentium voluptatum deleniti atque corrupti, quos dolores et voluptates repudiandae sint. Sapiente delectus, ut aut perferendis. Non numquam eius modi tempora incidunt. Veritatis et aut odit aut fugit, sed quia.


<div>
  <!-- Внутренний отступ: сверху - 10px сверху, слева и справа - 20px, снизу - 30px  -->
  <div>Содержимое блочного элемента.</div>
</div>

Lorem ipsum dolor sit amet. Ipsa, quae ab illo inventore veritatis et dolorum fuga amet consectetur. Assumenda est, omnis voluptas sit amet. Hic tenetur a sapiente delectus, ut perspiciatis, unde omnis. Id est laborum et quas molestias excepturi sint. Id est et voluptates repudiandae sint. Vero eos et iusto odio dignissimos ducimus, qui blanditiis praesentium. Dolores et quasi architecto beatae vitae dicta sunt, explicabo quia. Necessitatibus saepe eveniet, ut et aut odit aut reiciendis voluptatibus. Praesentium voluptatum deleniti atque corrupti, quos dolores et voluptates repudiandae sint. Sapiente delectus, ut aut perferendis. Non numquam eius modi tempora incidunt. Veritatis et aut odit aut fugit, sed quia.


<div>
  <!-- Внешний отступ: слева - 20px, снизу - 40px. Внутренний отступ слева - 30px  -->
  <div>Содержимое блочного элемента.</div>
</div>

Lorem ipsum dolor sit amet. Ipsa, quae ab illo inventore veritatis et dolorum fuga amet consectetur. Assumenda est, omnis voluptas sit amet. Hic tenetur a sapiente delectus, ut perspiciatis, unde omnis. Id est laborum et quas molestias excepturi sint. Id est et voluptates repudiandae sint. Vero eos et iusto odio dignissimos ducimus, qui blanditiis praesentium. Dolores et quasi architecto beatae vitae dicta sunt, explicabo quia. Necessitatibus saepe eveniet, ut et aut odit aut reiciendis voluptatibus. Praesentium voluptatum deleniti atque corrupti, quos dolores et voluptates repudiandae sint. Sapiente delectus, ut aut perferendis. Non numquam eius modi tempora incidunt. Veritatis et aut odit aut fugit, sed quia.


<div>
  <!-- Внутри блочного элемента <p> помещён строчный элемент <em>-->
  <p>Внутри этого блочного элемента помещён <em>строчный элемент</em>.</p>
</div>

Внутри этого блочного элемента помещён строчный элемент.

Примеры блочных элементов: <address>, <artical>, <aside>, <blockquote>, <dd>, <div>, <dl>, <dt>, <figure>, <footer>, <form>, <h2> - <h6>, <header>, <hr>, <li>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <tr>, <ul>.

Строчно-блочные элементы | Учебные курсы

Блочные и строчные элементы отлично дополняют друг друга при вёрстке, занимая каждый свою определённую нишу. Но возникают ситуации, когда характеристик этих элементов явно недостаточно. Галерея фотографий, представленная на рис. 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>Памятник Св.&nbsp;Владимиру</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 вам, в основном, будут попадаться два типа элементов 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>.

Перейти к заданиям

Блочные элементы | Учебные курсы

Блочным называется элемент, который занимает всю доступную ширину и всегда начинается с новой строки. У элементов с таким поведением в стилях свойство display задано как block, list-item, table и в некоторых случаях run-in. В HTML есть ряд элементов, у которых эти значения display установлены по умолчанию, поэтому они уже наделены свойствами блочных элементов. В частности, это <address>, <blockquote>, <h2>…<h6>, <p>, <ol>, <ul>, <section>, <div> и др.

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

Для блочных элементов характерны следующие особенности.

По ширине блочные элементы занимают всё допустимое пространство.

Если элемент располагается непосредственно внутри <body>, то он будет занимать всю ширину веб-страницы. Если один элемент находится внутри другого, то он будет занимать всю ширину своего родителя. В примере 1 показано, как это получается.

Пример 1. Ширина блоков

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина</title>
  <style>
   section {
    background: #F5E8D0; /* Цвет фона */
    padding: 20px; /* Поля */
   }
   h3 {
    background: #F0BA7D; /* Цвет фона */
    margin-top: 0; /* Убираем пустое пространство сверху */
    padding: 10px; /* Поля */
   }
  </style>
 </head>
 <body>
  <section>
   <h3>Дочь Монтесумы</h3>
   <p>Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, 
      они шли, чтобы сделать с нами, вольными англичанами, то же самое, что 
      Кортес сделал с индейцами Анауака.</p>
  </section>
 </body>
</html>

На рис. 1 показан результат действия примера. Элемент <section> занимает всю ширину веб-страницы, а заголовок <h3> и абзац <p> внутри <section> занимают всю доступную ширину блока.

Ширина блоков

Рис. 1. Ширина блоков

Ширина блока складывается из значений свойств width, padding, border и margin.

В примере 1 намеренно не указано свойство width, которое определяет ширину содержимого блока. Как только мы добавляем width, то блок уже не будет занимать всё доступное пространство по ширине. При этом ширина самого блока определяется сложением значений margin-left, border-left, padding-left, width, padding-right, border-right, margin-right. Иными словами, ширина содержимого плюс значения свойств padding, border и margin слева и справа (пример 2).

Пример 2. Ширина блока

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина</title>
  <style>
   section {
    background: #F5E8D0; /* Цвет фона */
    width: 400px; /* Ширина содержимого */
    padding: 20px; /* Поля */
   }
   h3 {
    background: #F0BA7D; /* Цвет фона */
    margin-top: 0; /* Убираем пустое пространство сверху */
    padding: 10px; /* Поля */
   }
  </style>
 </head>
 <body>
  <section>
   <h3>Дочь Монтесумы</h3>
   <p>Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, 
      они шли, чтобы сделать с нами, вольными англичанами, то же самое, что 
      Кортес сделал с индейцами Анауака.</p>
  </section>
 </body>
</html>

В данном примере добавлено свойство width со значением 400px. В итоге, ширина самого блока будет 440 пикселей, поскольку из всего набора свойств у нас есть только width и padding (рис. 2). Не забываем, что к width надо добавлять левый и правый padding.

Фиксированная ширина блока 440px

Рис. 2. Фиксированная ширина блока 440px

Всё это кажется довольно сложным, так что следует помнить, что width — это не ширина блока, а лишь ширина содержимого, а сам блок состоит из его содержимого, отступов, границ и полей. Для упрощения применяется свойство box-sizing, которое меняет алгоритм расчёта ширины. При значении border-box свойство width определяет уже ширину блока, включая padding и border, но не margin (пример 3).

Пример 3. Использование box-sizing

section {
  background: #F5E8D0; /* Цвет фона */
  box-sizing: border-box; /* Алгоритм расчёта ширины */
  width: 400px; /* Ширина блока */
  border: 1px solid #333; /* Рамка */
  padding: 20px; /* Поля */
}

Теперь width устанавливает не ширину содержимого, а ширину блока целиком и она равна 400px (рис. 3).

Фиксированная ширина блока 400px

Рис. 3. Фиксированная ширина блока 400px

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

Для высоты элемента работают те же принципы, что и для ширины, за исключением того, что высота блока зависит от высоты содержимого и меняется динамически, например, при изменении размера шрифта или окна браузера. Если явно установить высоту содержимого через свойство height, то высота блока складывается из height и значений margin, border, padding сверху и снизу (пример 4).

Пример 4. Высота блока

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Высота</title>
  <style>
   div {
    height: 100px; /*  Высота содержимого */
    background: #F2EFE6; /* Цвет фона */
    border: 1px solid #B25538; /* Параметры рамки */
    padding: 0 10px; /* Пространство сверху и снизу */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Лев ревёт только в том случае, когда сообщает, что 
      территория принадлежит ему или провозглашает себя царём природы.</p>
   <p>Охотничий участок льва может иметь длину и ширину 
      до тридцати километров.</p>
  </div> 
 </body>
</html>

При превышении указанной высоты содержимое отображается поверх блока (рис. 4).

Высота блока

Рис. 4. Высота блока

Блоки располагаются по вертикали друг под другом.

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

На блочные элементы не действуют свойства, предназначенные для строчных элементов.

Ряд стилевых свойств, вроде vertical-align, работает только для строчных элементов и их применение к блочным элементам не даёт никакого видимого результата.

Преобразование в блочный элемент

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

Пример 5. Меню

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .menu {
    list-style: none; /* Убираем маркеры списка */
    padding: 5px; /* Поля от рамки до пунктов меню */
    border: 1px solid #000; /* Рамка вокруг меню */
   } 
   .menu a {
    padding: 2px; /* Поля вокруг текста */
    display: block; /* Ссылка как блочный элемент */
    border: 1px solid transparent; /* Маскируем рамку вокруг ссылки */
    text-decoration: none; /* Убираем подчёркивание у ссылок */
   }
   .menu a:hover {
    background: #faf3d2; /* Цвет фона под ссылкой */
    color: #800000; /* Новый цвет ссылки */
    border: 1px dashed #634f36 /* Рамка вокруг ссылки */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="1.html">Метод простых итераций</a></li>
   <li><a href="2.html">Метод случайных чисел</a></li>
   <li><a href="3.html">Метод дихотомии</a></li>
   <li><a href="4.html">Метод золотого сечения</a></li>
  </ul> 
 </body>
</html>

Для превращения ссылки в блочный элемент к селектору a добавляется свойство display со значением block. После этого вся строка выступает ссылкой, поэтому при наведении курсора на строку, даже за пределами текста, происходит изменение стиля ссылки (рис. 5).

Ссылка как блочный элемент

Рис. 5. Ссылка как блочный элемент

Перейти к заданиям

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

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

Это элементы, которые совмещают в себе свойства блочных и строчных элементов.

В HTML нет специальных тэгов, которые бы относились к строчно-блочным элементам. Для того, чтобы сделать элемент строчно-блочным необходимо применить к нему свойство display:inline-block.

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

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

В то же время, как к блочным элементам, строчно-блочным элементам можно успешно применять свойства margin-top, margin-bottom, padding-top, padding-bottom и свойство height.

<p>Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста <span>Строчно-блочный элемент</span> Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста </p>

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

2) Внутри строчно-блочных элементов могут находиться как строчные, так блочные, так и табличные элементы.

3) Ширина и высота строчно-блочных элементов формируется также как для блочных элементов.

4) Для строчно-блочных элементов работает свойство vertical-align.

<span>Строчно-блочный элемент</span> <span>bottom</span><span>top</span>

5) Схлопование margin для строчно-блочных элементов не работает.

Где строчно-блочные элементы могут пригодиться?

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

Очень часто это можно видеть в интернет-магазинах:

05-01-2014 15-20-14

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

Единственный недостаток display:inline-block в том, что большинство старых браузеров не поддерживает свойства display:inline-block.

Браузер Internet Explorer начал поддержку этого свойства только со своей 8 версии.

Посмотрите поддержку браузеров в следующей таблице.

05-01-2014 13-52-57

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *