Между заголовком и основным текстом слишком большой отступ, как его уменьшить?

🕛 19.01.2009, 19:28

К абзацу (тег <P>) и заголовку (тег <H1>) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить параметр margin-bottom к селектору H1. Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа (пример 1).

Пример 1. Использование отрицательных отступов

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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"> H1 { margin-bottom: -15px; /* Отрицательный отступ между заголовком и текстом */ } </style> </head> <body> <h1>Апплет</h1> <p>Программа, которая выполняется с составе браузера или под управлением специальной программы для ее просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание &laquo;Java апплет&raquo;.</p> </body>
</html>

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