Каковы отступы и / или поля по умолчанию для элемента p (сброс css)?

Question

Я уже довольно давно использую набор стилей для сброса CSS, и каждый раз, когда мне приходится создавать новый веб-сайт, меня больше всего раздражает сброс - сброс поля p-тега и отступы. Я понимаю, почему, но мне интересно, какой отступ и / или поля по умолчанию должны быть для элемента p?

Я предполагаю, что это не согласовано в разных браузерах и часто требует настройки для каждого сайта, но есть ли набор наиболее распространенных значений полей и / или отступов?

Короткая версия: это (например) 5px margin и отступ сверху и низ ... или что-то еще?

Answer 1

Спецификация CSS 2.1 имеет таблицу стилей по умолчанию для HTML 4. Это просто информативно и ненормативно, поэтому браузеры могут использовать ее, но не обязаны.

Другим ресурсом могут быть инструменты веб-разработчика браузеров. Большинство из них может показать вам каскад правил, которые были применены к определенному элементу. Пример: Firefox и Safari (WebKit), кажется, используют margin: 1em 0px для p элементов.

Answer 2

Чтобы выровнять вещи в браузерах, я использую

p{
  margin:0;
}
p + p{
  margin-top:10px;
}

таким образом, я не "тормозу" контейнеров между оригинальными верхними / нижними интервалами и все равно красиво делаю абзацы, если их больше одного.

Мне просто не нравится, когда p толкает родительские контейнеры вот так

.container {
  border: 1px solid #ccc;
  padding: 15px;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
</div>

и рассматривайте это как идеальное решение

.container {
  border: 1px solid #ccc;
  padding: 15px;
}
p{
  margin:0;
}
p + p{
  margin-top:10px;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.</p>
</div>

Answer 3

Размер поля тега P сверху и снизу составляет 16 пикселей.

Это похоже на предоставление поля стиля: 16px 0px; к абзацу.

Answer 4

Я всегда использую Firefox.

С помощью аддона Firebug я обнаружил, что поле по умолчанию для верхнего / нижнего края тега

установлено в 16px, а отступ - в 0, а для элемента body поле-верх / низ / правое / левое установлен на 8px.

Answer 5

СБРОС CSS Сбрасывает маркер p отступов и отступы до 0px, Общее поле и отступ зависят от вашего макета и типа контента.

Тем не менее вы можете использовать 5px, в качестве собственного поля по умолчанию и отступов