为什么我的页面右侧有一堆空白？答案

【问题标题】：why is there a bunch of white space on the right of my page?为什么我的页面右侧有一堆空白？
【发布时间】：2014-10-15 22:55:37
【问题描述】：

我的页面右侧有一堆空白，我不知道如何摆脱它。我对编码很陌生。这是我的代码：

<!DOCTYPE html>

<html>

<head>
    <title>blablabla</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
</head>

<body>
    <div class="wrap">
        <!-- BEGIN HEADER -->
        <div class="topheader">
            <img src="uglyperson.jpg" id="logo"/>
            <h1 id="quote"><em>"blablablablabla."</em></h1>
            <p>
            <a href="#">bla</a> 
            <a href="#">bla</a> 
            <a href="#">bla</a> 
            <a href="#">bla</a>
            </p>
        </div>
        <!-- END HEADER -->
        <hr />
    </div>  

</body>

</html>

还有我的 CSS：

a:link {
    color:white;
    background-color:lightgreen;
    text-decoration:none;
    font-size:50px;
    padding-left:20px;
    padding-right:20px;
}

a:visited {
    color:white;
    background-color:lightgreen;
    text-decoration:none;
    font-size:50px;
    padding-left:20px;
    padding-right:20px;
}

p {
    position:absolute;
    top:20px;
    left:750px;
    min-width:100%;
}

#logo {
    height:150px;
}

h1 {
    font-size:50px;
    position:absolute;
    top:0px;
    left:180px;
}

.wrap {
    width:95%;
    min-width:100%;
}

我不知道出了什么问题，我检查了我的代码，一切似乎都很好，至少据我所知。

【问题讨论】：

尝试检查页面上的元素。它们中的任何一个导致右边的空白吗？
你试过设置html和body的宽度吗？我会考虑在您的自定义 css 文件之前包含一个重置样式表
将您的代码粘贴到小提琴中，但显然没有左图：jsfiddle.net/joadarr6 右边的空白到底是什么意思？你的意思是分隔bla bla blas的空格吗？还是整个部分右侧的空白区域？
我已经检查过了，我似乎找不到任何东西，这就是我问的原因。对不起。
整个部分右侧的@rmehlinger

标签： html css whitespace

【解决方案1】：

这是因为您在<p> 标签上设置了min-width: 100%。它导致它与屏幕一样宽，但由于left:750px; 而错位到左侧。

改为删除min-width。如果重点是保持 bla bla bla 内联，请改用 white-space: nowrap：

See DEMO

p {
    position:absolute;
    top:20px;
    left:750px;
    white-space: nowrap;
}

【讨论】：

【解决方案2】：

添加

body {
  margin 0;
  padding: 0;
}

到您的 CSS。

【讨论】：