Question

我是一名新的css程序员，我的代码中存在一个非常烦人的问题。当我把灰色条放在它们没有触及屏幕的左侧时，它们触及右侧而不是左侧，我不知道为什么我的代码中没有任何东西阻止它们所以我不知道为什么它会这样做请帮我解决它谢谢！（中间的大白色空间应该在那里用于拍照。）

<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="https://fonts.googleapis.com/css?family=Oswald"      rel="stylesheet"> 



<style type="text/css">




    #white{
        color:white;


    }


    .large {
        font-size:300%;
    }

    #green {
        color:black;
    }

    .underline {
        text-decoration:underline;
        }

        .bold {
            font-weight:bold;
        }

        .picture{
        position: absolute;
        top: 45px;
        right: 0;
        width: 1870px;
        height: 10px;

        }


        .greybox {
        background-color:#a5a5a5;
        position: absolute;
        top: 380px;
        right: 0;
        width: 1870px;
        height: 10px;
        border: 3px solid #a5a5a5;

        }


        .connect {
        background-color:#6b6b6b;
        position: absolute;
        top: 340px;
        right: 0;
        width: 1870px;
        height: 40px;
        border: 3px solid #6b6b6b;

        }


        .top {
         top:10px;
        width: 1870px;
        height:700px;
        z-index:2;
        text-align: center;




        }

        .bottom {
            background-color:#0a0a0a;
            width: 1600px;
            height:200px;
            text-align: center;


        }

        .purplebox {
            background-color:#6b6b6b;
            position: absolute;
            top: 0px;
            right: 0;
            width: 1870px;
            height: 40px;
            border: 3px solid #6b6b6b;





            }

        .greenbox {
        top:0px;
        width: 1870px;
        height: 500px;
        z-index:2;
        text-align: center;
        margin:150px 100px 30px 10px;
        float:center;
        font-family: 'Oswald', sans-serif;


        }


        }

        p {
            padding:0;
            margin:0;
        }





</style>  
</head>

<body>


<div class="greybox">


</div>


<div class="purplebox">

    <p class="large"></p>

</div>

<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870"> 
</div>

<div class="connect">
<p> Connect with me! </p>

</div>

<div class="top">

    <p id="green" class="large">idfk</p>

    </div>



</div>

<div class="greenbox">

    <p id="green" class="large">idfk</p>

    </div>

    <div class="greenbox">

    <p id="green" class="large">idfk</p>

    </div>

    <div class="bottom">

    <p id="white" class="large">Connect With me!</p>

    </div>

Answer 1

默认情况下，页面上的正文有这个css：

body {
  display: block;
  margin: 8px; 
}
body:focus {
  outline: none; 
}

在你的css文件顶部添加：

body {
  margin:0;
}

这样你开始使用0边距。

Answer 2

<body>的边距并不重要，因为这些灰色条绝对位于右侧，因此它们会粘在<html>元素的右侧。如果屏幕分辨率（屏幕或窗口的宽度）大于width: 1870px;，则它们会粘在右侧并在左侧留下一个空白区域。

如果您希望这些灰色框始终贴在屏幕的两侧，请使用width: 100%;或不使用宽度left: 0;代替：

.connect {
    background-color: #6b6b6b;
    position: absolute;
    top: 340px;
    right: 0;
    width: 100%;
    height: 40px;
    border: 3px solid #6b6b6b;
}

或

.connect {
    background-color: #6b6b6b;
    position: absolute;
    top: 340px;
    right: 0;
    left: 0;
    height: 40px;
    border: 3px solid #6b6b6b;
}

两者都会将元素拉伸到其父元素的宽度。

但将身体的位置设置为相对并摆脱其默认边距是很好的。在我看来，您不应该使用<html>标记进行样式设置。它会使那些绝对定位的灰色框粘在<body>而不是<html>的边上：

body {
    margin: 0;
    position: relative;
}

请参阅此链接以了解有关定位的更多信息：http://www.w3schools.com/css/css_positioning.asp

为什么我的CSS的左侧有一个空白区域

2 个答案: