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

Question

October Landing Page

我正在开发的页面上有几个问题。在上面的页面中，您会看到页面底部的三个框 - 两个是相同的格式，第三个有自己的问题。

方框 1 和 2（没有边框的）

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

框 3（带有捐赠按钮的框）

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

有什么解释或建议吗？？

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

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;
}