ap元素的默认填充和/或边距是什么(重置css)？

Question

我一直在使用重置CSS样式集已经有一段时间了,每次我创建一个新网站时,重置最让我烦恼的是ap标签边距和填充的重置.我理解为什么,但我想知道ap元素上的"默认"填充和/或边距应该是什么？

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

简短版本:它是(例如)5px边距和顶部和底部的填充......还是其他什么？

Answer 1

在CSS 2.1规范有一个默认样式表的HTML 4.这只是知识性和不规范性,以便浏览器可能会使用它,但不必.

另一种资源可能是浏览器的web开发工具.大多数可以向您展示应用于特定元素的级联规则.一个例子: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标签边距顶部和底部为16px.

这类似于给出样式边距:16px 0px; 到一个段落.