额外的填充或边距从哪里来？

Question

十月登陆页面

我在页面上遇到了一些问题正在发展。在上面的页面中，您将在页面底部看到三个框 - 两个框具有相同的格式，第三个框有其自身的问题。

框 1 & 2（没有边框的）

问题：不知何故，列表项有一些额外的左填充（显然），但样式表中未指定 - 至少不是故意的。他们是否从其他地方继承了填充？两个盒子似乎都存在这个问题。

第 3 框（带有捐赠按钮的那个）

问题：顶行按钮似乎从某处继承了一些额外的填充或边距，但我不知道在哪里。

有什么解释或建议吗？

*更新：好的，所以我解决了框 1 和框 1 的问题。 2 通过为其 ul 添加新规则，并将填充设置为 0px。不确定它从哪里继承填充，但这有效。

Answer 1

不同的浏览器使用不同的默认设置，这就是为什么有些浏览器选择使用 CSS 重置，以便将默认值设置为特定值（如 0px 等）。检查这是否可以解决您的问题：

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, u, i, center,
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-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}