Question

我一直在使用重置CSS样式集很长一段时间，每次我创建一个新网站时，重置最让我烦恼的是重置p标签边距和填充。我理解为什么，但我想知道p元素上的“默认”填充和/或边距应该是什么？

我猜这在浏览器中并不一致，并且通常需要针对每个站点进行调整，但是有一组最常见的边距和/或填充值吗？

简短版本：它是（例如）5px页边距和填充顶部和底部......还是别的什么？

Answer 1

CSS 2.1 specification有一个default style sheet用于HTML 4.它只是提供信息而不是规范性的，因此浏览器可以使用它但不必使用它。

另一种资源可能是浏览器的webdeveloper工具。大多数可以向您展示应用于特定元素的级联规则。例如：Firefox和Safari（WebKit）似乎对margin: 1em 0px元素使用p。

Answer 2

为了解决浏览器问题，我使用

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

这样我不会＆＃34;刹车＆＃34;容器原始的顶部/底部间距，如果有多个，仍然可以很好地填充段落。

我只是不喜欢看到p推这样的父容器

＆＃13;

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

＆＃13;

<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>

＆＃13;

并将其视为理想的解决方案

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

P标签边距顶部和底部是16px。

这类似于给出样式边距：16px 0px;一段。

Answer 4

CSS RESET将p标签边距和填充重置为0px，公共边距和填充取决于您的布局和内容类型。

仍然可以使用5px作为您自己的默认边距和填充

Answer 5

我总是使用firefox。

通过firebug插件我发现

标签的默认margin-top / bottom设置为16px，padding设置为0，而body元素的边缘顶部/底部/ right / left设置为8px。

p元素的默认填充和/或边距是什么（重置css）？

5 个答案: