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

Содержание

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

Строчными называются такие элементы, которые являются непосредственной частью строки, у них значение свойства display установлено как inline. Элементы, для которых это значение задано по умолчанию, — <span>, <a>, <q>, <code> и др., в основном они используются для изменения вида текста или его смыслового выделения.

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

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

Свойства, связанные с размерами (width, height), не применимы.

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

Размер элемента равен его содержимому плюс значения margin, border и padding.

Несмотря на то, что явно задать размеры элемента нельзя, на него можно влиять косвенно с помощью свойств margin, border и padding, значения которых суммируются с размерами содержимого (пример 1).

Пример 1. Размеры элемента

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры элемента</title>
  <style>
   h2 {
    background: #EDE6CE; /* Цвет фона */
   }
   h2 span {
    margin: 16px; /* Отступы */
    padding: 1px; /* Поля */
    border-bottom: 2px solid #D71920; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <h2><span>Заголовок</span></h2>
 </body>
</html>

В данном примере внутрь блочного элемента <h2> добавлен строчный элемент <span> и для него уже заданы свойства margin, padding и border. Это сделано для того, чтобы линия была строго под текстом (рис. 1), а не на всю длину блока, как получилось бы, добавь мы border для h2 напрямую.

Рис. 1. Линия под текстом

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

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

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

Рис. 2. Перенос строки

Чтобы запретить перенос текста внутри элемента, добавьте свойство white-space со значением nowrap (пример 2).

Пример 2. Перенос строк

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Перенос строк</title>
  <style>
   .muscle {
    padding: 2px; /* Поля вокруг текста */
    border: 1px dotted maroon; /* Параметры рамки */
    background: #C5E2BD; /* Цвет фона */
    white-space: nowrap; /* Запрещаем перенос текста */
   }
  </style>
 </head>
 <body>
  <p>Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях 
  и развернув их в стороны. Руки за головой. Тяните голову руками 
  вверх и вперёд до полного сокращения <span>мышц живота</span>.
  Задержитесь на две секунды. Выполните восемь повторений.</p>
 </body>
</html>

Перенос текста считается за пробел.

В коде HTML любой перенос текста воспринимается браузером как пробел, это касается и размещения элементов на отдельных строках. Сравните два абзаца в примере 3. В первом абзаце каждый <span> располагается на отдельной строке, а во втором абзаце код идёт сплошной строкой без пробелов и переносов.

Пример 3. Перенос но новую строку

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Перенос строк</title>
  <style>
   span {
    padding: 5px; /* Поля вокруг текста */
    background: #008EB0; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>
   <span>Uno</span>
   <span>Dos</span>
   <span>Tres</span>
  </p>
  <p><span>Cinco</span><span>Seis</span><span>Siete</span></p>
 </body>
</html>

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

Рис. 3. Пробелы между элементами

В строчно-блочных элементах мы ещё вернёмся к этой особенности.

Можно выравнивать по вертикали с помощью свойства vertical-align.

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

Пример 4. Использование vertical-align

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Выравнивание</title>
  <style>
   img {
    vertical-align: middle; /* Выравнивание по середине */
   }
   .icon {
    vertical-align: middle; /* Выравнивание по середине */
    margin-left: 7px; /* Отступ слева */
    margin-right: 20px; /* Отступ справа */
    color: #ED1C24; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>
   <img src="image/animate.png" alt=""><span>Анимация</span>
   <img src="image/list.png" alt=""><span>Список</span>
   <img src="image/print.png" alt=""><span>Печать</span>
   <img src="image/text.png" alt=""><span>Текст</span>
  </p>
 </body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинок и текста

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

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через значение inline и преобразование блочного элемента в строчный (пример 5).

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .menu {
    margin: 0; padding: 0; /* Убираем пустое пространство */
    line-height: 1.8; /* Межстрочный интервал */
   }
   .menu li {
    display: inline; /* Строчные элементы */
    background: #D9B492; /* Цвет фона */
    padding: 3px 7px; /* Поля вокруг текста */
    white-space: nowrap; /* Запрещаем перенос текста */
   }
   .menu li a {
    text-decoration: none; /* Убираем подчёркивание у ссылок */
   }
  </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>

Результат данного примера показан на рис. 5.

Рис. 5. Строчные элементы

Внимание! Превращение элемента в строчный не даёт право нарушать структуру кода HTML и порядок вложения элементов.

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

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

Строчные элементы | htmlbook.ru

Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К строчным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения.

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

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

В примере 1 показано использование тега <span> для выделения отдельных слов.

Пример 1. Применение строчных элементов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Встроенные элементы</title>
  <style type="text/css">
   .pose {
    background: #fc0; /* Цвет фона */
    margin-left: 1em; /* Отступ слева */
   }
   .press {
    padding: 1px; /* Поля вокруг текста */
    border: 1px dotted maroon; /* Параметры рамки */
    color: navy; /* Цвет текста */
   }
   .num {
    font-weight: bold; /* Жирное начертание */
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
   <p><span>Лягте животом на пол</span>. 
    Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки 
    за головой. Тяните голову руками вверх и вперед до полного сокращения <span 
   >мышц живота</span>. Задержитесь на две секунды. 
    Выполните <span>восемь</span> повторений.</p>
 </body>
</html>

Результат примера показан ниже (рис. 1).

Рис. 1. Текст, оформленный с помощью стилей

В данном примере тег <span> и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счет фонового цвета, рамки вокруг текста и сменой его цвета.

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через значение inline (пример 2).

Пример 2. Свойство display

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Встроенные элементы</title>
  <style type="text/css">
   .notetitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как строчный элемент */
    background: #ffeebf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    white-space: nowrap; /* Запрещены переносы текста */
   }
   .note {
    border: solid 1px #634f36; /* Параметры рамки */
    background: #f3f0e9; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em 0; /* Значение отступов */
   }
  </style>
 </head>
 <body>
  <p>Примечание</p>
  <p>Исходя из различных критериев, основными из 
   которых являются показатели целесообразности и эффективности приложенных усилий, 
   можно однозначно сказать следующее. А именно, что достижение желаемых результатов 
   требует гибкого подхода, основанного на опыте и глубоком понимании 
   смысла вышеизложенного.</p>
 </body>
</html>

Результат примера приведен на рис. 2.

Рис. 2. Замена блочного элемента на строчный

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

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

Пример 3. Наложение слоев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Встроенные элементы</title>
  <style type="text/css">
   .send {
    background: #d6d3a2; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    padding-left: 45px; /* Отступ слева */
   }
   .pic {
    position: relative; /* Относительное позиционирование */
    top: -20px; /* Смещаем слой вверх */
    left: 3px; /* Сдвигаем слой вправо */
   }
  </style>
 </head>
 <body>
  <div>Отправить ссылку на эту статью другу</div>
  <div><span>
   <img src="images/mail.gif" alt=""></span></div>
 </body>
</html>

Результат примера представлен на рис. 3.

Рис. 3. Положение рисунка относительно текста

В данном примере изменение положения слоя происходит за счет установки относительного позиционирования (свойство position со значением relative) с последующим сдвигом относительно исходного расположения. Для чего применяются свойства left и top. Заметьте, что первоначальное место, где была картинка, резервируется, поэтому ниже текста и рисунка имеется достаточно большой отступ.

В примере 3 можно вообще отказаться от добавления тега <div>, заменив его тегом <span> и таким образом, полностью перейти на строчные элементы. Полученный результат, естественно, будет отличаться своим видом, также придется несколько подкорректировать и стили (пример 4).

Пример 4. Использование тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Встроенные элементы</title>
  <style type="text/css">
   .send {
    background: #d6d3a2; padding: 5px; padding-left: 10px;
   }
   .pic {
    position: relative; top: 20px; left: 14px;
   }
  </style>
 </head>
 <body>
  <div>
   <span><img src="images/mail.gif" alt=""></span>
   <span>Отправить ссылку на эту статью другу</span>
  </div>
 </body>
</html>

Результат примера показан ниже (рис. 4).

Рис. 4. Положение рисунка относительно текста

За счет того, что тег <span> не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.

Резюме

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Блочные элементы</title>
</head>
<body>
	<p>
		Я &ndash; первый абзац.
	</p>
	
	<p>
		Я &ndash; второй абзац.<br>
		А я &ndash; продолжение второго абзаца.
	</p>
</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Строчные элементы</title>
</head>
<body>
	<span>
		Я &ndash; первое предложение.
	</span>
	
	<span>
		Я &ndash; второе предложение.
	</span>
</body>
</html>

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

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

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

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

1 Ноябрь, 2013 — 20:58

Почти все теги в HTML делятся на строчные (inline) и блочные (block). Разница в этих понятиях огромная.

Для начала разберемся, чем же они все-таки такие разные. Строчными элементами называются те элементы, которые непосредственно являются частью строки. Ширина таких элементов равна ширине содержимого элемента. Строчные элементы не имеют верхних и нижних отступов. В общем потоке html документа строчные элементы идут друг под другом, если объем их содержимого не превышает ширину строки. В отличие от блочных элементов, показывая строчные браузер не ставит переноса строк не перед элементом, не после него. Внутри строчных элементов можно размещать другие строчные элементы. Применение внутренних отступов padding-top и padding-bottom влияют только на высоту области, которую занимает строчный элемент, но никак не влияют на высоту строки. Внешние отступы margin-top и margin-bottom не влияют на форматирования строчного элемента. В html существует множество строчных элементов, самые популярные из них:

<a> — гиперссылка,
<abbr> — аббревиатура,
<b> — жирный шрифт,
<br> — перевод строки,
<cite> — название, используется для художественных произведений,
<code> — код программы,
<i> — курсивный шрифт,
<input> — элемент формы, может являться кнопкой, текстовым полем,
<label> — создаёт связь с элементом формы, элемент формы,
<select> — создает группу тегов option, с выпадающим списком,
<small> — уменьшает размер шрифта текста на одну единицу,
<span> — строчный элемент,
<textarea> — элемент формы, многострочное поле ввода.

Блочные элементы образуют прямоугольную область, перед и после блочного элемента стоит перевод строки. Размеры блочного элемента могут изменяться атрибутами width i height. К блочным элементам применимы как внешние, так и внутренние отступы. Внутренние отступы (padding) влияют на размеры блочного элемента. Самые распространенные блочные теги html:

< html> — документ html,
<body> — тело документа,
<div> — блок,
<p> — параграф,
<h2-h6> — заголовки от самого большого, до самого малого,
< ul, ol, dl> — маркированный, нумерованный список и список определений,
<dt, dd> — дочерние элементы dl,
<address> — курсивное форматирование текста, используется для указания автора текста,
<blockquote> — используется для выделения длинных цитат,
<form> — форма html предназначенная для обмена информацией между пользователем и сервером.

Строчные элементы в CSS характеризуются значением inline атрибутa display. Для Блочных элементов значение атрибута display равно block. Благодаря этому атрибуту, строчные элементы всегда можно превратить в блочные и наоборот. Например, давайте превратим строчную ссылку в блочную и блочный div в строчный. Строчные элементы можно размещать в блочных, а блочные в строчных нельзя.

У атрибута display также есть значение none, которое используется для скрытия элемента. Он не занимает места в общем потоке html документа и не видим для пользователя. Теперь прочитав эту подробную статью, вы легко сможете делать вашу верстку валидной и красивой.

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

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

<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>

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

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