Стиль по умолчанию для вложенных неупорядоченных и упорядоченных списков - PullRequest
0 голосов
/ 13 марта 2020

Согласно CSS Справочнику значений по умолчанию , для обоих элементов ol и ul их верхнее и нижнее поля имеют значение 1em.

Но если бы это было В этом случае вложенные списки добавят вертикальное поле с любым новым уровнем, например:

ul {
  margin-top: 1em;
  margin-bottom: 1em;
}
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
  </li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

Тем не менее, каждый браузер, который я тестировал, представляет вложенные списки без каких-либо дополнительных вертикальных полей, например:

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetuer adipiscing elit.</li>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
  </li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

Мой вопрос: каков (настоящий) стиль по умолчанию для элементов ol и ul, особенно для вложенных.

1 Ответ

1 голос
/ 13 марта 2020

Стиль по умолчанию для одиночных ul / ol: 1em margin-block-start и margin-block-end,

Для вложенных списков (ul ul, ul ol, ol ul, ol ol) это 0 margin-block-start и margin-block-end.

Вы также можете заметить, как значение по умолчанию list-style-type меняется с disc на circle на square.

Вы всегда можете проверить с помощью инструментов разработчика или просмотреть страницу с пользовательским агентом браузера, здесь Chrome, Firefox и Safari

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...