尽管在样式表 - CSS中设置为0，但保证金仍然存在

Question

在Chrome浏览器中，当我打开网页上的Inspect Element时，我注意到其中一个div在右侧有一个边距，可以横向填充页面的其余部分：

据我所知，该div上不存在合适的保证金。在html文档的样式表中，右边距设置为零。并且，“检查元素”窗口中的框模型显示-的右边距：

CSS：

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #FFF;
}

#header {
    /*this is the parent div of the div with the unexpected right margin*/
    width: 100%;
    height: 50px;
    background-color: #26519E;
    box-shadow: 0 5px 5px Lightgray;
}

#logo {
    /*this is the div with the unexpected margin*/
    width: 120px;
    height: inherit;
    margin-left: 180px;
    /*!!!*/
    margin-right: 0;
    padding: 10px;
}

检查元素：

logo div上可能导致此右边距的原因是什么？

如果需要更多信息来确定发生了什么，请告诉我。

Answer 1

像div in-flow这样的块级元素（div是一个块级元素，而不是像span，img或strong这样的内联元素）具有自动右边距，因为它（正常div＆＃39; s） ）想要成为父div的宽度的100％。

解决方案是浮动的：左（使其脱离流量），显示：内联块（改变其流动能力，如上面的评论中提到的，我不会占用信用:)）和flexbox （这是相对较新的，所以我不建议继续加入）。

此外，请查看bootstrap及其网格系统，以便更好地与您的网站进行对齐，这也可以很好地扩展到手机和平板电脑。

次要补充：

<div id="header">
  <div class="container">
  </div>
</div>
<div id="main">
  <div class="container">
  </div>
</div>

使用：

#header,#main {
  width: 100%;
}
#header {
  background: brown;
  height: 3em;
}

.container {
  width: 1000px;
  margin: 0 auto;
  min-height: 20em;
}

创建一个简单（但没有响应）的中心解决方案