html - 内联 block 在其容器的高度溢出？

Question

我有这个颜色容器:

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

还有 CSS:

.color-container {
  width: 300px;
  height: 320px;
  position: relative;
  text-align: center;
  margin: auto;
 }

但是我的 child 溢出了父颜色容器的高度？ children 有这样的风格:

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

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

Answer 1

您应该根据边框最小化宽度和高度，因为边框总共为 3px(水平和垂直)。和 float:left;

.color-container {
  width: 300px;
  height: 320px;
  position: relative;
  text-align: center;
  margin: auto;
 }
.color-container > div {
  float:left;
  height: 147px;
  width: 147px;
  background-color: green;
  border-radius: 0 100% 0 0;
  border: solid #333333;
  border-width: 2px 2px 1px 1px;
}
#red {
  background-color: red;
  border-radius: 100% 0 0 0;
}
#green {
  background-color: green;
  border-radius: 0 100% 0 0;
}
#yellow {
  background-color: yellow;
  border-radius: 0 0 0 100%;
}
#blue {
  background-color: blue;
  border-radius: 0 0 100% 0;
}
.inline {
  display: inline-block;
}

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