Html 尽管在样式表-CSS中将边距设置为0，但边距仍然存在

在Chrome中，当我打开网页上的Inspect元素时，我注意到其中一个div在右侧有一个边距，水平填充了页面的其余部分：

据我所知，该div上不应存在右边距。在html文档的样式表中，右边距设置为零。并且，Inspect Element窗口中的长方体模型显示右边距

-

：

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;
}

检查元件：

* {
    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;
}

是什么原因导致

徽标上出现这种右边距？

div？

---

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

块级元素，如flow中的div（div是块级元素，而不是span、img或strong等内联元素），具有自动右页边距，因为它（普通div）希望是父div宽度的100%

解决方案有float:left（让它脱离流程）、display:inline-block（改变它的流程能力，正如上面的评论所提到的，我不会占用积分：）和flexbox（这是相对较新的，所以我不建议现在就开始）

另外，看看它的网格系统，以便更好地调整你的网站，它也可以漂亮地扩展到手机和平板电脑上

少量添加：

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

---

创建一个简单（但不响应）的居中解决方案

右边距为0？而且不存在余量。@Leonel是的，它被设置为零。我刚刚编辑了css部分。我无法理解您评论的第二部分-您所说的“无保证金存在”是什么意思？保证金权利：0px；-这能满足你的期望吗？如果这不能解决问题，你能在codepen上快速抛出一些东西吗？div是块元素。块元素用于覆盖放置它们的线条的整个宽度。块元素在webkit中的工作方式是，它将自动添加一个幻影边距，以便在您限制其宽度时覆盖父元素的整个宽度；也就是说，只要不浮动它，就绝对定位它，或者内联阻止它。你可以有一个固定的宽度（

width:120px

）并使用

display:inline block

）。只需确保在

#logo

之后插入任何内容即可。