| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Прибрати відступи навколо маркірованого або нумерованого списку.
Рішення
Використовуйте стильове властивість margin і padding з нульовим значенням для селектора UL або OL, в залежності від типу списку, як показано в прикладі 1.
Приклад 1. Відступи у списку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відступи у списку</title>
<style>
ul {
padding: 0; margin: 0; /* Прибираємо відступи у списку */
}
</style>
</head>
<body>
<hr>
<ul>
<li>Шевченко Т. Г.</li>
<li>Франко І. Я.</li>
<li>Косач Л. П.</li>
</ul>
<hr>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Список без вертикальних і горизонтальних відступів
Зверніть увагу, що зникають маркери, які виявляються за лівим краєм веб-сторінки. Щоб прибрати тільки верхній і нижній відступ, не змінюючи при цьому список вліво, використовуйте властивості margin-top і margin-bottom (приклад 2).
Приклад 2. Відступи у списку
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відступи у списку</title>
<style>
ul {
margin-top: 0; /* Відступ зверху */
margin-bottom: 0; /* Відступ знизу */
}
</style>
</head>
<body>
<hr>
<ul>
<li>Шевченко Т. Г.</li>
<li>Франко І. Я.</li>
<li>Косач Л. П.</li>
</ul>
<hr>
</body>
</html>