html.okpython.net
HTML и CSS для начинающих

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

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

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

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Блочные элементы</title>
</head>
<body>
	<p style="background-color: green; color: black">
		Я &ndash; первый абзац.
	</p>
	
	<p style="background-color: orange; color: blue">
		Я &ndash; второй абзац.<br>
		А я &ndash; продолжение второго абзаца.
	</p>
</body>
</html>

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

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

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

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Строчные элементы</title>
</head>
<body>
	<span style="background-color: green; color: black">
		Я &ndash; первое предложение.
	</span>
	
	<span style="background-color: orange; color: blue">
		Я &ndash; второе предложение.
	</span>
</body>
</html>

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

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

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

Быстрый переход к другим страницам

▲
▼