Question

出于某种原因，用户代理会覆盖我的CSS，并在我正在创建的网站上添加边距。我搜索了stackoverflow的答案，但似乎没有解决我的问题。

以下是一个例子：

HTML：

<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="site-wrapper">
    <div class="menu">
        <div class="nav">
            <ul>
                <li><a href="#">EXAMPLE</a></li>
                <li ><a href="/spots">EXAMPLE</a></li>

                    <li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
            </ul>
        </div>      
    </div>  
        <div class="content">
            <p id="notice"></p>

<div class="container">

</div>
        </div>
    </div>
</body>
</html>

CSS：

html,
body {
  height:100%;
  width:100%;
  margin: 0px;
  display: block;
}

.site-wrapper {
    display: block;
    background-color: yellow;
    width: 100%;
    height: 100%;
}

.nav {
    background-color: red;
}

.content {
    background-color: blue;
    width: 300px;
    height: 300px;
}

.menu {
    font-weight: 400;
    top:50%;
    margin-top:-115px;
    position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}


ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}

http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview

Answer 1

段落有默认的保证金。消除它：

p {
    margin:0;
}

<强> jsFiddle example

Answer 2

问题是由边距折叠引起的 - 父元素没有边距（或填充），因此使用了段落的边距。

您可以按j08691的建议删除段落中的边距，也可以通过向父容器添加样式来阻止边距折叠 - 请参阅此问题：How to disable margin-collapsing?

例如，这将有所帮助：

.content {
    display: inline-block;
}

Answer 3

您可以使用此代码为所有元素设置边距

 *{
  margin:0;
  padding:0;
 }

如何从嵌套容器的网站中删除上边距？

3 个答案: