Как убрать отступ сверху и снизу от списка?

🕛 19.01.2009, 23:29

Используйте стилевой параметр margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL, в зависимости от типа списка. Также можно воспользоваться универсальным атрибутом margin как показано в примере 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"> UL { margin: 0; /* Убираем отступы у списка */ } </style> </head> <body> <hr> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> <hr> </body>
</html>

В браузере Internet Explorer при использовании атрибута margin исчезают также отступы слева и маркеры становятся не видны. Поэтому используйте margin-top и margin-bottom с нулевым значением (пример 2).

Пример 2. Отступы в списке

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"> UL { margin-top: 0; /* Отступ сверху */ margin-bottom: 0; /* Отступ снизу */ } </style> </head> <body> <hr> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> <hr> </body>
</html>