【问题标题】：How to deal with default padding and margins如何处理默认填充和边距
【发布时间】：2014-04-17 23:09:39
【问题描述】：

我现在对 html5/css3 相当满意，因此我正在尝试使用它制作一个网站并使其具有响应性。

到目前为止，除了这两个问题，一切都很顺利：

em 的使用我根本不懂计算，尤其是为什么我必须把这个 font: .81em/150% 我正在关注来自在线教程的指南。
我的 div 上有一些虚构的填充，你可以在这里看到它 http://jsfiddle.net/NhZ2A/

例如我在身上：

 body{padding:0px; margin:0px;}

然后我有一个带有这样图像的 div：

 <div id="slider">
     <img src="images/slider.jpg"/>
 </div>

然后在我的 css 中我有：

 #slider{
  width:100%;
  height:auto;
}

 #slider img{
   width:60%;
   height:auto;
}

使用上面的 css，我仍然在下面的滑块 div 上有填充，或者它可能是下图中的边距。

我不明白为什么，它杀了我。

【问题讨论】：

1em=16px 与 100% 相同。如果需要，请使用此工具pxtoem.com
我不明白为什么每个人都为这个问题提供重置 CSS 解决方案，OP 可以使用它们但它们不是他问题的答案。

标签： html css responsive-design fluid-layout

【解决方案1】：

JUSR 使用 CSS 重置

* { 
  margin:0;
  padding:0;
  box-sizing:border-box;
 }

【讨论】：

【解决方案2】：

是的，CSS 重置对于为每个元素设置默认初始值很重要。

reset.css 来源 - Reset5

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video
{
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    margin:0;
    padding:0
}
    body
{
    line-height:1
}
    article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote
{
    display:block
}
    nav ul
{
    list-style:none
}
    ol
{
    list-style:decimal
}
    ul
{
    list-style:disc
}
    ul ul
{
    list-style:circle
}
    blockquote,q
{
    quotes:none
}
    blockquote:before,blockquote:after,q:before,q:after
{
    content:none
}
    ins
{
    text-decoration:underline
}
    del
{
    text-decoration:line-through
}
    mark
{
    background:none
}
    abbr[title],dfn[title]
{
    border-bottom:1px dotted #000;
    cursor:help
}
    table
{
    border-collapse:collapse;
    border-spacing:0
}
    hr
{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}
    input[type=submit],input[type=button],button
{
    margin:0!important;
    padding:0!important
}
    input,select,a img
{
    vertical-align:middle
}

em - 单位度量值（1em 等于当前字体大小，等同于 2em = 2*font-size）

字体语法：

font: font-style font-variant font-weight font-size/line-height font-family;

在你的问题值 .81em/150%

.81em/150% - 字体大小/行高

【讨论】：

【解决方案3】：

第一个选择是

CSS 重置

Most Used Css Reset

【讨论】：

【解决方案4】：

第二期：

这个空间不是填充的，它是因为<img>标签是一个内联元素而创建的，因此在<img>标签上有一个whitespace使用display:block;来删除它。

【讨论】：

display:block 解决了这个问题，谢谢伙计...如果我找不到任何人来解释如何计算 em，我会接受你的回答
@user2666633 我在考虑字体问题，但我不太明白你的问题，你能解释一下吗？
我正在尝试设计一个响应式网站，我读到建议使用 em 而不是 px，但是有一个奇怪的计算，您将 body 字体设置为 100%，然后将其他容器中的字体设置为将 px 下潜 100% 以获得正确的 em 值，这令人困惑
@user2666633 好吧，我还是不明白你的意思，抱歉 :( 我能给出的唯一建议是看看这个：developer.mozilla.org/en-US/docs/Web/CSS/font-size

【解决方案5】：

使用 css resets ，为了获得一致的跨浏览器体验，应该包括其中任何一个。

Eric Meyer 的重置 CSS

HTML5 Doctor CSS 重置

雅虎！ (YUI 3) 重置 CSS

标准化.css

从这里获取 --> http://www.cssreset.com/

【讨论】：

【解决方案6】：

每个浏览器都有默认行为和配置

如果您想从所有这些中重新开始，则必须使用“reset.css”样式表对其进行设置，以避免不良行为并具有同质性。

检查这个 SO 答案以获得正确的重置 CSS 样式表： https://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet

【讨论】：