ap 元素(重置 css)的默认填充和/或边距是多少?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/819161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the default padding and/or margin for a p element (reset css)?
提问by Darryl Hein
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 样式集有一段时间了,每次我创建一个新网站时,最让我烦恼的是重置 ap 标签边距和填充。我明白为什么,但我想知道 ap 元素上的“默认”填充和/或边距应该是什么?
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 andpadding on top andbottom...or something else?
简短版本:是(例如)5px 的边距和顶部和底部的填充……还是其他什么?
采纳答案by Gumbo
The CSS 2.1 specificationhas an default style sheetfor 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) 似乎margin: 1em 0px
用于p
元素。
回答by Benn
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>
回答by Suyesh Tiwari
P tag margin top and bottom is 16px.
P 标签上下边距为 16px。
That is similar to giving style margin: 16px 0px; to a paragraph.
这类似于给样式边距:16px 0px; 到一个段落。
回答by Wasim Shaikh
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 ,作为您自己的默认边距和填充
回答by Ligz
I always use firefox.
我总是用火狐。
By the firebug addon I found that the default margin-top/bottom of the
通过萤火虫插件,我发现默认的边距顶部/底部
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.
tag 设置为 16px 并且 padding 设置为 0,而 body 元素的 margin-top/bottom/right/left 设置为 8px。