为什么我在同一行的第二个 div 忽略了边距？

Question

在搜索问题后，我设法让我的两个div 一直在同一行。但是现在，我的第二个div 拒绝遵循父div 的margin-right 规则。所以我将它添加到div 本身，它仍然忽略它。我以为是text，但这似乎并不重要。我已经尝试为第二个div 删除width，这很有效，但是它太拥挤了。基本上，我希望我的div 与浏览器的size 一起缩放，我使用两个div 的百分比，但右边的div 拒绝缩小到某个点。 overflow:hidden 好像也没有效果。

这是我正在尝试制作的页面。 project

父级：

.split {
    margin: 0px 75px 15px 75px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

还有子 div：

#pow {
    width: 50%;
    display: inline-block;
    margin-right: 15px;
}

#foundhome {
    width: 38%;
    display: inline-block;
    position: absolute;
    margin-left: 0;
}

编辑：再次查看我的东西后，似乎我可能在某个地方犯了错误。尽管给出的答案在某种程度上确实有效。我会慢慢重新添加片段，看看我哪里出错了。

Answer 1

在 CSS 中查看关于 Box Model 的本教程。

本质上，您遇到的问题是因为width 属性指的是元素的内容宽度。它不考虑边距、填充或边框，因此当您添加这些值时，您必须在设置的宽度中考虑这一点。

如果您认为这很糟糕，并且想在设置宽度时考虑整个盒子模型，请参阅 Here 说明如何使用 box-sizing CSS3 设置将填充和边框包含在总宽度，但它不适用于margin，它总是在元素宽度之上计算（因为它描述了元素周围应该保持清晰的区域）。