Question

问题看起来非常基本，而且是......

如何删除这些间隙，如图像所示

http://postimg.org/image/qigf1nfen/ （不是非常专业的img我同意）

我希望这些差距应该消失，就像我想在整个页面中创建一个像Facebook一样的标题，从左到右，任何建议？

代码：

的index.html：

<!DOCTYPE=html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="main.css">
        <body>
            <div class="row">
               <div class="col4">
                    <h1>Lorem Ipsum</h1>
                </div>
            </div>
        </body>
    </html>

的main.css：

* {
   outline: 1px solid red !important;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.row{
    width:100%;
    display: flex;
    flex-wrap:wrap;
}
.col1{
    width: 8.33%;
}
.col2{
    width: 16.66%;
}
.col3{
    width: 25%;
}
.col4{
    width: 33.33%;
}
.col5{
    width: 41.66%;
}
.col6{
    width: 50%;
}
.col7{
    width: 58.33%;
}
.col8{
    width: 66.66%;
}
.col9{
    width: 75%;
}
.col10{
    width: 83.33%;
}
.col11{
    width: 91.66%;
}
.col12{
    width: 100%;
}

Answer 1

您需要从body和html元素中删除边距。更好的方法是使用normalize作为起点（正如@ThomasBormans在评论中所建议的那样）

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

Answer 2

#div1 div {
width:30px;height:30px;
border:blue 1px solid;
display:inline-block;
*display:inline;zoom:1;
margin:0px;outline:none;
vertical-align: top;
}

另外Remove "whitespace" between div element

Answer 3

您可以从最初的所有元素中删除所有边距和边框

 * { margin: 0; padding: 0; }

您可以使用 reset.css 来最小化浏览器差异。

如何在html中删除我的部门的差距？

3 个答案: