Як видалити відступ зверху і знизу від списку?

23.09.2010

Влад Мержевич

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.

Зверніть увагу, що зникнуть маркери списку, які виявляються за лівим краєм веб-сторінки. Щоб усунути лише верхній і нижній відступи, не зсуваючи при цьому список вліво, використовуйте властивості 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>

спискивідступи

Задача

Рішення

Часті запитання