小编典典

嵌入式块盒不能放入其容器中[重复]

html

这个问题已经在这里有了答案

如何删除内联/内联块元素之间的空间? (39个答案)

4年前关闭。

不知道我在做什么错,我以为通过添加边框框,它可以恰好适合这四个框。

http://jsfiddle.net/jzhang172/x3ftdx6n/

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

阅读 285

收藏
2020-05-10

共1个答案

小编典典

问题在于,inline-block默认情况下,元素会渲染一些额外的空间。

为什么?因为div设置为inline-block具有某些内联元素特征。

span元素之间的空格或换行符将导致浏览器呈现一个空间。

同样,如果您要在<p>元素中编写文本,则每次按下空格键或添加换行符时,浏览器都会呈现一个空格。

此规则适用于inline-blockdiv。源中的空格或换行符将导致渲染一个空间。这会产生意外的宽度,从而导致溢出或包装。

一种解决方案是删除源中元素之间的所有空格:

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

其他选项包括 负边距省略关闭标签使用注释标签浮点数flexbox 。请参阅本文以获取更多详细信息:

2020-05-10