Отбивка

Метки:

текст

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

Для абзацев на веб-странице, которые создаются с помощью тега <P>, отбивка задана по умолчанию. Другое дело, что она не всегда соответствует задумке автора, поскольку меняется автоматически в зависимости от размера шрифта. Регулировать отступы до и после абзаца могут, соответственно, стилевые свойства margin-top и margin-bottom или универсальный атрибут margin. В примере 1 показано, как установить отступы самостоятельно.

Пример 1. Использование margin

<!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=windows-1251">
  <title>Отбивка</title>
  <style type="text/css">
   P {
    margin: 0 auto 20px; /* Отступы сверху, по горизонтали и снизу */
   }
  </style>
 </head>
 <body>
  <p>Такелаж - все снасти на судне, служащие для укрепления рангоута и
     управления им и парусами.</p>
  <p>Фал - веревка (снасть), при помощи которой поднимают на судах паруса, реи, 
     сигнальные флаги и проч.</p>
 </body>
</html>

В данном примере отступ сверху задан нулевым, а снизу установлен 20 пикселов. Результат примера показан на рис. 1.

Рис. 1

Рис. 1. Отбивка снизу от абзаца

Когда абзацы располагаются друг за другом, не важно где делается отступ — до или после абзаца, имеет значение только сумма отступов между абзацами. Однако эта особенность теряет смысл, как только добавляются заголовки. На рис. 2 продемонстрирован текст с заголовками, заданными через тег <H2>. Расстояние от заголовка до верхнего и нижнего текста примерно одинаково, что не есть правильно, поскольку не возникает взаимосвязи между заголовком и расположенным ниже текстом.

Рис. 2

Рис. 2. Отбивка у заголовков по умолчанию

Чтобы изменить значение отбивки, применим стилевой атрибут margin к селектору H3, причем в данном случае можно использовать отрицательное значение (пример 2).

Пример 2. Отбивка у заголовков

<!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=windows-1251">
  <title>Отбивка</title>
  <style type="text/css">
   h3 {
    margin: auto auto -14px; /* Отступ сверху, по горизонтали и снизу */
   }
  </style>
 </head>
 <body>
  <h3>Такелаж</h3>
  <p>Все снасти на судне, служащие для укрепления рангоута и управления им и парусами.</p>
  <h3>Фал</h3>
  <p>Снасть, при помощи которой поднимают на судах паруса, реи, сигнальные флаги и проч.</p>
 </body>
</html>

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

Рис. 3

Рис. 3. Отрицательная отбивка у заголовков

Термины

Отбивка

Отправить комментарий