如何处理默认的填充和边距

Question

现在我对html5/css3很满意，所以我正在尝试使用相同的网站并使其响应。

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

1. EM我不明白的计算可言，特别是为什么我使用把这个字体：.81em/150％我正在按照在线教程的指导。

2. 我有我的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上仍然有填充，或者它可能是下图中的边距。

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

Answer 1

对于第二个问题：

的空间不填充，这是因为<img>创建标记是嵌入式元素，因此在<img>标记上使用whitespace使用display:block;可将其删除。

Answer 2

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

如果你想从所有这些干净启动，则必须用“reset.css”样式表设置，避免不良行为，都均匀。

检查这个苏答案得到正确复位CSS样式表： https://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet

Answer 3

使用CSS复位，为了得到一致的跨浏览器的体验，它应该包括在内，其中的任何一个。

Eric Meyer的重置CSS

HTML5医生CSS重置

雅虎（YUI 3）重置CSS

Normalize.css

从这里得到它 - >http://www.cssreset.com/

Answer 4

第一选择将是

的CSS复位

Most Used Css Reset

Answer 5

是，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: font-style font-variant font-weight font-size/line-height font-family; 

在您的问题值.81em/150％

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

Answer 6

JUSR使用CSS RESET

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