Question

mainBox的缺点有一点白色差距，它是什么导致它？

body {
  margin: 0px;
  padding: 0px;
}
div {
  border: 1px solid black;
  box-sizing: border-box;
  font-size: 30px;
}
#wrapper {
  width: 900px;
  margin: 0px auto;
}
#header {
  width: 100%;
  height: 100px;
  background: red;
}
#container {
  width: 100%;
  height: 100px;
  background: black;
}
#mainBox {
  width: 75%;
  height: 150px;
  background: blue;
  float: left;
}
#sideBox {
  width: 25%;
  height: 100px;
  background: yellow;
  float: left;
}
#footer {
  clear: both;
  width: 100%;
  height: 50px;
  background: white;
}

<div id="wrapper">
  <div id="header">this is the header
  </div>
  <div id="container">
    <div id="mainBox">main box
    </div>
    <div id="sideBox">side box
    </div>
  </div>
  <div id="footer">this is the footer
  </div>
</div>

Answer 1

这是因为#sideBox身高100px，#mainBox身高150px。同时解决您的问题。

我将#sideBox设置为height:150px;

您已将父容器#container提供给height:100px，将子容系提供给height:150px。

修改

我想我之前误解了你的问题。但正如我上面所说。你的父母身高比你孩子小。妥善解决问题。

＆＃13;
＆＃13;
body{ margin:0px; padding:0px;} div{ border:1px solid black; box-sizing:border-box; font-size:30px;} #wrapper{ width:900px; margin:0px auto;} #header{ width:100%; height:100px; background:red;} #container{ width:100%; height:150px; background:black;} #mainBox{ width:75%; height:150px; background:blue; float:left; } #sideBox{ width:25%; height:100px; background:yellow; float:left; } #footer{ clear:both; width:100%; height:50px; background:white; }
＆＃13;
<body> <div id="wrapper"> <div id="header">this is the header </div> <div id="container"> <div id="mainBox">main box </div> <div id="sideBox">side box </div> </div> <div id="footer">this is the footer </div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

将border: none添加到#container

body{
      margin:0px;
      padding:0px;}
div{
    border:1px solid black;
    box-sizing:border-box;
    font-size:30px;}
#wrapper{
    width:900px;
    margin:0px auto;}
#header{
    width:100%;
    height:100px;
    background:red;}
#container{
    border: none;      /**** Add this extra line ****/
    width:100%;
    height:100px;
    background:black;}
#mainBox{
    width:75%;
    height:150px;
    background:blue;
    float:left;
    }
#sideBox{
    width:25%;
    height:100px;
    background:yellow;
    float:left;
    }
#footer{
    clear:both;
    width:100%;
    height:50px;
    background:white;
    }

<body>
<div id="wrapper">
    <div id="header">this is the header
    </div>
    <div id="container">
        <div id="mainBox">main box
        </div>
        <div id="sideBox">side box
        </div>
    </div>
    <div id="footer">this is the footer
    </div>
</div>

Answer 3

你在这里有一个白色的差距，因为你的蓝色div（#mainBox）是150px，它高于它的容器div（#container），设置为100px。这导致#mainBox div延伸到容器外部，由于黑色边框应用于div，因此在最左侧略有偏移。

有多种方法可以纠正这种差距，例如删除边框或硬编码的高度值。

我的CSS的白色差距是多少？

3 个答案: