Html 内联块在其容器高度上溢出？

我有一个彩色容器：

<div class="color-container">
   <div class="inline" id="red"></div>
   <div class="inline" id="green"></div>
   <div class="inline" id="yellow"> </div>
   <div class="inline" id="blue"> </div>
</div>

但我的孩子们是否溢出了父母的颜色容器的高度？孩子们都有这样的风格：

#green {
  height: 150px;
  width: 150px;
  background-color: green;
  border-radius: 0 100% 0 0;
  border: solid #333333;
  border-width: 2px 2px 1px 1px;
}

类

inline

如下所示：

.inline {
  display: inline-block;
}

我原以为它不会溢出，但结果是：

---

您应该根据边框最小化宽度和高度，因为边框总共是

3px

（水平和垂直）。和

float：左


.color容器{
宽度：300px；
高度：320px；
位置：相对位置；
文本对齐：居中；
保证金：自动；
}
.color container>div{
浮动：左；
高度：147px；
宽度：147px；
背景颜色：绿色；
边界半径：0 100%0 0；
边框：实心#333333；
边框宽度：2px2px1px1px1px；
}
#红色的{
背景色：红色；
边界半径：100%0；
}
#绿色的{
背景颜色：绿色；
边界半径：0 100%0 0；
}
#黄色的{
背景颜色：黄色；
边界半径：01100%；
}
#蓝色的{
背景颜色：蓝色；
边界半径：0 100%0；
}
.内联{
显示：内联块；
}
您应该根据边框最小化宽度和高度，因为边框总共是
3px
（水平和垂直）。和
float：左


.color容器{
宽度：300px；
高度：320px；
位置：相对位置；
文本对齐：居中；
保证金：自动；
}
.color container>div{
浮动：左；
高度：147px；
宽度：147px；
背景颜色：绿色；
边界半径：0 100%0 0；
边框：实心#333333；
边框宽度：2px2px1px1px1px；
}
#红色的{
背景色：红色；
边界半径：100%0；
}
#绿色的{
背景颜色：绿色；
边界半径：0 100%0 0；
}
#黄色的{
背景颜色：黄色；
边界半径：01100%；
}
#蓝色的{
背景颜色：蓝色；
边界半径：0 100%0；
}
.内联{
显示：内联块；
}

谢谢你的点播！我错过了，我认为有足够的空间@300，因为孩子是150，谢谢你的现场！我没注意到，我以为有足够的空间@300因为孩子是150，
.inline {
  display: inline-block;
}