Html 子div与父div大小相同溢出

在做了很多谷歌搜索之后，我找不到为什么同样大小的父母的孩子会满溢

比如说

first-长方体模型 您的边框正在向框中添加大小，这是目前大多数人使用的默认值

* {
  box-sizing: border-box
}

（如果你有这个选项，只需将它放入你的全局CSS中，就可以了）

强烈推荐阅读，对这一点的基本理解会让你省去很多痛苦（或者至少帮助你寻找答案！）

以你的例子：

---

其原因是

框大小

css属性…其默认值和初始值为

内容框

，这意味着元素的宽度和高度包括内容，而不是其填充、边框

您需要将

框大小：边框框

设置为div，以便填充和边框包含在元素的宽度和高度中

由于

display:inline块

，您的div不是并排的。这就是它的工作原理。使用

inline block

在一行中设置元素，就像我们打字时的单词一样，在元素之间创建空格，这是很常见的事情

因此，要删除它们之间的空格，可以删除代码中这两个div之间的空格，或者将

font-size:0

设置为父div，然后将

font-size:initial

设置为子元素

*{
框大小：边框框；
}

请检查以下内容：

不要忘记边界。此外，子对象是

内联块

s，因此子对象之间的空间（或表格）具有自己的宽度。设置框大小：边框框，并删除块之间的所有空格：

div{
框大小：边框框；
}

---

要解决此问题，您需要在正文中添加

框大小：边框框

，并添加

空白：nowrap

到父级，也更改子级的

显示：内联块

即：

检查这个

---

这是因为

边框

，设置了不要忘记边框。此外，子对象是

内联块

s，因此子对象之间的空间（或表格）具有自己的宽度。设置“框大小：边框框”并删除块之间的所有空格。@Alexander如何删除块之间的空格？谢谢链接！我一定会读到关于盒子模型的书。然而，在父母道歉中，这两个孩子仍然不适合并排出现——似乎我只回答了问题的一半，will reviseGood solution+1 OK谢谢，但是我如何让这两个孩子都适合父母呢？谢谢你的回答！这不适合parenthi bro中的两个孩子，请再次检查运行示例。我已经更新了代码。我希望这对你有用。

<div class="parent">
   <div class="child first"> </div>
    <div class="child second"> </div>
</div>

body {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
.parent {
  background:blue;
  width:500px;
  height:40px; 
  white-space: nowrap;
}
.first {
  width:30%;
  border:4px solid red;
  display:inline-block;
}
.second {
  width: 70%;
  border:4px solid pink;
  display: inline-block;
}
.child {
 height:40px;
 font-size:0px;
 display:inline-block;
}