Question

这里是JsFiddle：https://jsfiddle.net/ztxmqyxg/

<!DOCTYPE html>

<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>

<ul>
    <img src="images/logo.png">
    <li><a href="#">iPhone</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPod</a></li>
</ul>

<div id="ad">

    <h1>Think different</h1>

</div>
<div id="product-container">
    <div id="product" class="product2">



    </div>
    <div id="product" class="product1">



    </div>
</div>
<div id="product-container2">

</div>

这是CSS：

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


ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background-color: #000000;
}

li {
    float: left;
}

ul img {
    margin-top: 7px;
    margin-right:30px;
    display: block;
    float: left;
    height: 40px;
}

li a {
    font-family: 'Open Sans Condensed', sans-serif;
    display: block;
    color: #EDEDED;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #EEEEEE;
    color:#000000;
    text-decoration:none;
}

#ad {
    padding: 5px 20px;
    background-color: #000000;
    height: 200px;

}

h1 {
    font-family: 'Dosis', sans-serif;
    color: #EDEDED;
}

#product-container {
    margin: 0px;
    padding: 0px;
}

#product {
    padding: 5px 20px;
    height: 300px;
    display: inline-block;
}

.product1 {
    background-color: #DAE7EB;
    float: right;
    width: 50%;
}

.product2 {
    background-color: ;
    width: 50%;
}

#product-container2 {
    height: 300px;
    background-color: #E9E9E9;
}

嗯，在JSfiddle中，导航栏和2个第一个div之间存在差距，当我在计算机上运行它时不会发生这种情况，所以不要介意。

问题是白色和蓝色盒子之间的差距以及底部的灰色盒子，你看到那里有一个小差距，但我不明白为什么会这样。

实际上我尝试将保证金设置为0（看看是否有效）但它没有。

Answer 1

#product div中的**kwds导致不需要的5px余量。将其删除并将.productcontainer更改为display: inline-block

display:flex

html,body {
    padding:0;
    margin:0;
}


ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background-color: #000000;
}

li {
    float: left;
}

ul img {
    margin-top: 7px;
    margin-right:30px;
    display: block;
    float: left;
    height: 40px;
}

li a {
    font-family: 'Open Sans Condensed', sans-serif;
    display: block;
    color: #EDEDED;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #EEEEEE;
    color:#000000;
    text-decoration:none;
}

#ad {
    padding: 5px 20px;
    background-color: #000000;
    height: 200px;
    
}

h1 {
    font-family: 'Dosis', sans-serif;
    color: #EDEDED;
}

#product-container {
    margin: 0px;
    padding: 0px;
    display: flex;
}

#product {
    padding: 5px 20px;
    height: 300px;
    
}

.product1 {
    background-color: #DAE7EB;
    float: right;
    width: 50%;
}

.product2 {
    background-color: ;
    width: 50%;
}

#product-container2 {
    height: 300px;
    background-color: #E9E9E9;
}

Answer 2

请参阅此fiddle

导致问题的线高。更新<div class="calendar" ng-model="eventSources" config="campaignsCalendarConfig" ui-calendar="campaignsCalendarConfig"></div>的CSS，如下所示

#product-container

div之间的差距很小，但我没有在css上设置边距

2 个答案:

请参阅此fiddle