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