为什么即使我没有设置任何保证金，我也会得到默认保证金？ [复制]答案

【问题标题】：Why am I getting default margin even though i haven't set any? [duplicate]为什么即使我没有设置任何保证金，我也会得到默认保证金？ [复制]
【发布时间】：2019-07-04 06:27:08
【问题描述】：

我已将 mainBackground 类设置为 div。尽管我只设置了背景颜色，但我从四面八方的 chrome 窗口中得到了一个边距。我的代码如下：

     .mainBackground {
            background-color: #ece8e8;
            width: 100%;
        }

    <div class="mainBackground">
        hello
    </div>

我想删除那个 div 标签的边距。

【问题讨论】：

你试过 body {margin: 0} 吗？
你在身上设置margin: 0和padding: 0了吗？
看看这里：stackoverflow.com/questions/6867254/…

标签： html css sass

【解决方案1】：

* {
  margin: 0;
  padding: 0;
}
.mainBackground {
  background-color: #ece8e8;
  width: 100%;
  padding: 100px 0;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="mainBackground">
    hello
</div>
</body>
</html>

给边距：0；和 padding: 0 每个元素！希望对你有帮助

【讨论】：

【解决方案2】：

这是因为每个浏览器都有自己的样式。如果你想删除它，你有 2 个解决方案。

第一个解决方案将边距和内边距设置为每个元素 0

* {
 margin: 0;
 padding: 0;
}

第二种解决方案将边距和填充设置为元素/类/id

body, div{ 
     margin: 0;
     padding: 0;
}

【讨论】：

【解决方案3】：

如前所述，每个浏览器都有其“自己的观点”。每个浏览器都有自己定义的样式预设。要绕过自己的解释，建议使用reset-css。

可以在以下代码摘录中找到这可能的示例

Source

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

【讨论】：

【解决方案4】：

每个浏览器都有every 元素的默认样式。例如，它为所有内容定义了标准字体大小。它还为元素定义了一些标准间距。因此，如果您仅使用 HTML 编写页面并且不添加任何 CSS，它仍然可以阅读和理解。

如果您不想使用这些默认样式，则必须使用您自己的样式覆盖它们。

删除不需要的间距的一种常见方法是在所有元素上将其设置为 0：

* { margin: 0; padding: 0} //you can also just define all elements you want here instead of star-selector

你也可以使用一些reset.css

【讨论】：