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

I have been using a reset CSS set of styles for quite some time now and each time I got to create a new website, the reset the annoys me the most is the reseting of a p tag margin and padding. I understand why, but I'm wondering what the "default" padding and/or margin should be on a p element?

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

I'm guessing this isn't consistent across browsers and often needs to be tweaked for each site, but is there a set of most common margin and/or padding values?

我猜这是不一致的浏览器，往往需要调整每个网站，但是有一组最常见的边距和/或填充值？

Short version: Is it (for example) 5px margin and padding on top and bottom...or something else?

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

5 个解决方案

#1

The CSS 2.1 specification has an default style sheet for HTML 4. It’s just informative and not normative so browsers may use it but do not have to.

CSS 2.1规范有一个HTML 4的默认样式表。它只是提供信息而不是规范，因此浏览器可以使用它但不必使用它。

Another resource could be the webdeveloper tools of the browsers. Most can show you the cascade of rules that were applied to a particular element. An example: Firefox and Safari (WebKit) seem to use margin: 1em 0px for p elements.

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

#2

P tag margin top and bottom is 16px.

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

That is similar to giving style margin: 16px 0px; to a paragraph.

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

#3

To even things out across browsers , I use

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

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

this way I dont "brake" containers original top/bottom spacing and still space the paragraphs nicely if there are more than one.

通过这种方式，我不会“制动”容器原始的顶部/底部间距，如果有多个，仍然可以很好地分隔段落。

I just dont like to see p pushing parent containers like this

我只是不喜欢看到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>

and see this as ideal solution

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

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

#4

CSS RESET Will reset p tags margin and padding to 0px, common margin and padding depends on your Layout and type of Content.

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

still you can use 5px , as your own default margin and padding

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

#5

-1

I always use firefox.

我总是用firefox。

By the firebug addon I found that the default margin-top/bottom of the

通过firebug插件我发现默认的上边距/下边距

tag is set to 16px and the padding is set to 0, while for the body element the margin-top/bottom/right/left is set to 8px.

标签设置为16px，填充设置为0，而对于body元素，margin-top / bottom / right / left设置为8px。

#1