Убрать отступ сверху и снизу от списка - «Списки» » Новости мира Интернет
Google сворачивает проект Privacy Sandbox после шести лет разработки - «Новости мира Интернет»
Google сворачивает проект Privacy Sandbox после шести лет разработки - «Новости мира Интернет»
Apple готовит первый MacBook с сенсорным экраном и OLED-дисплеем - «Новости мира Интернет»
Apple готовит первый MacBook с сенсорным экраном и OLED-дисплеем - «Новости мира Интернет»
В России заработал ИИ-режим от Google - «Новости мира Интернет»
В России заработал ИИ-режим от Google - «Новости мира Интернет»
YouTube представил крупнейшее обновление интерфейса видеоплеера за последние годы - «Новости мира Интернет»
YouTube представил крупнейшее обновление интерфейса видеоплеера за последние годы - «Новости мира Интернет»
Apple представила новые MacBook Pro, iPad Pro и Vision Pro на процессоре М5 - «Новости мира Интернет»
Apple представила новые MacBook Pro, iPad Pro и Vision Pro на процессоре М5 - «Новости мира Интернет»
Microsoft добавила новые ИИ-функции для Copilot в Windows 11 - «Новости мира Интернет»
Microsoft добавила новые ИИ-функции для Copilot в Windows 11 - «Новости мира Интернет»
Honor представила концепт смартфона Robot Phone с робокамерой и ИИ - «Новости мира Интернет»
Honor представила концепт смартфона Robot Phone с робокамерой и ИИ - «Новости мира Интернет»
WhatsApp введёт лимит на безответные сообщения, чтобы бороться со спамом - «Новости сети»
WhatsApp введёт лимит на безответные сообщения, чтобы бороться со спамом - «Новости сети»
Интерес к ChatGPT на смартфонах стал угасать — пользователи проводят в приложении всё меньше времени - «Новости сети»
Интерес к ChatGPT на смартфонах стал угасать — пользователи проводят в приложении всё меньше времени - «Новости сети»
Игровой ноутбук Redmagic Titan 16 Pro 2026 за $4209 получил чип Core Ultra 9 275HX и графику GeForce RTX 5090 - «Новости сети»
Игровой ноутбук Redmagic Titan 16 Pro 2026 за $4209 получил чип Core Ultra 9 275HX и графику GeForce RTX 5090 - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Списки » Убрать отступ сверху и снизу от списка - «Списки»
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>
Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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. Отступы в списке HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис;1. .; Рис. 1. Список без вертикальных и горизонтальных отступов Обратите внимание, что исчезают маркеры списка, которые оказываются за левым краем веб-страницы. Чтобы убрать только верхний и нижний отступ, не сдвигая при этом список влево, используйте свойства margin-top и margin-bottom (пример.;2). Пример 2. Отступы в списке HTML5 CSS 2.1 IE Cr Op Sa Fx

Смотрите также

А что там на главной? )))



Комментарии )))