CSS重置:为什么标题会忽略* {margin:0; }?

时间:2016-02-06 13:19:55

标签: css reset typography

Normalize很酷。但我非常讨厌边距/填充/盒子大小。

当我设置* { margin: 0; }时,它似乎会正确地重置除标题(h1,h2等等)元素之外的所有元素。

发生了什么事?我该如何重置这些元素?

2 个答案:

答案 0 :(得分:0)

浏览器具有不同的默认样式表。

这就是为什么开发人员经常使用某种类型的css重置,如normalize.css

如果您想在所有浏览器中消除不需要的边距,请尝试添加此(或normalize.css):

*, html, body {
    margin:0;
    padding:0;  
}

css重置还有很多其他选项 - Eric Meyers提出了一个很好的选项。

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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

答案 1 :(得分:0)

我喜欢在这里使用像这个坏男孩一样完整的CSS重置 - http://meyerweb.com/eric/tools/css/reset/ 您必须手动设置所有内容的样式,包括标题和列表