内嵌块框不适合它们的容器

Question

不确定我做错了什么，我认为通过添加边框框，它会整齐地适合这 4 个框。

.ok{
width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

Answer 1

问题是 inline-block 元素在默认情况下会呈现一些额外的 space。

为什么？因为 div 设置为 inline-block 具有一些内联元素特性。

space 或 span 元素之间的换行符将导致浏览器呈现 space。

同样，如果您在 <p> 元素中编写文本，每次您点击 space 栏或添加换行符时，浏览器都会呈现 space .

同样的规则适用于 inline-block div。源中的 space 或换行符将导致呈现 space。这会产生意外的宽度，从而导致溢出或环绕。

一个解决方案是删除源中元素之间的所有白色space：

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

另一种方法在父级上设置 font-size: 0，并在必要时恢复子级上的字体：

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
  font-size: 0;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
  font-size: 16px;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

其他选项包括负边距、省略结束标记、使用注释标记、floats 和 flexbox。有关详细信息，请参阅本文：

Fighting the Space Between Inline Block Elements

Answer 2

我会坚持你 只添加一个属性。 一个删除 box div 之间的空格。只需将 float:left; 添加到您的 .box class/div.

Demo : UPDATED

.ok{
    margin:0px auto; /* ADDED */
    width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
    padding:0px auto;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
    float:left;
}

<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

更新： 将它居中添加 再添加一个 属性 margin:0px auto; 到您的 .ok class/div。查看更新的演示和代码片段。

Note : This would make your text in box div left aligned, so if you want it center just add text-align:center; to your .box class in CSS.

内嵌块框不适合它们的容器

inline-block boxes not fitting in their container

html

css

border-box