使用 100% 宽度时为白色 space

Question

我和一个朋友正在一个网站上工作，但由于某种原因，当我使用 100% 宽度时，仍然有白色 space。我怎样才能解决这个问题？这些是主要的 css 元素

#info_container{
height:100%;
width:100%;
display:inline-block;
padding-top:3%;
background-color:#D3D3D3;
}

#main_header {
background: -webkit-linear-gradient(#2a2a2a, #545454);
text-align: center;
align-items: center;
vertical-align: middle;
position: absolute;
width:100%;
height:8%;
margin:-1em;
position:fixed;
display: table;
width: 100%;
table-layout: fixed;
/* For cells of equal size */
}

JSFiddle

Answer 1

有一个非常简单的解决方法。您的文本有整行背景色，因此要使其仅出现在信息容器中的文本区域，只需将该文本放入范围 class 中即可。现在只需从原始 class 中删除该背景颜色并将其放入您的跨度中！如果你将它放入另一个 css 文件，你可以给 span 一个 class，但我只是在这里直接将它放入 html。

<p><span style="background-color:red;">Hello World</span></p>

Answer 2

第一个最佳实践是放置通用选择器* { padding: 0; margin: 0;} 以避免边距和填充溢出。

我更新了你的fiddle

对您的 CSS

的更改

* { padding: 0; margin: 0; }

#main_header {
    background: -webkit-linear-gradient(#2a2a2a, #545454);
    text-align: center;
    align-items: center;
    vertical-align: middle;
    position: absolute;
    width:100%;
    position:fixed;
    display: table;
    width: 100%;
    table-layout: fixed;
    /* For cells of equal size */
}
#main_header a {
    display:inline-block;
    text-decoration:none;
    color:#567aa9;
    display: table-cell;
    vertical-align: middle;
    padding:.5%;
}
a span {
    text-decoration:none;
    color:#878787;
    font-size:55px;
    top: 10%;
    overflow: hidden;
    left:50%;
}
.a1:hover {
    color:#bababa;
}
.a2:hover{
    color:#bababa;
}
.a3:hover{
    color:#bababa;
}
.a4:hover{
    color:#bababa;
}
#info_container{
    height:100%;
    width:100%;
    display:inline-block;
    padding-top:7%;
}
html {
    font-size: 62.5%;
}

body {
    font-size: 1em;
}

@media (max-width: 300px) {
    html {
        font-size: 70%;
    }
}

@media (min-width: 500px) {
    html {
        font-size: 80%;
    }
}

@media (min-width: 700px) {
    html {
        font-size: 120%;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 200%;
    }
}
#info_container{
    height: 100px; // changed this from 100%;
    width:100%;
    padding-top: 3%; // removed
    display:inline-block;
    background-color:#D3D3D3;
}

编辑：更新了 FIDDLE

使用 100% 宽度时为白色 space

White space when using 100% Width

html

css

whitespace

removing-whitespace