Question

当我对我的div使用display = inline-block时，这两个框之间有一个间隙。任何人都可以告诉我为什么会这样，我怎样才能消除差距？

* {
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}

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

Answer 1

使用float: left;

* {
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block; float:left
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;float:left
}

Answer 2

为父元素设置font-size: 0。

.parent-element {  /* apply to the parent element */
  font-size: 0;
}

.first, .second {
     font-size: 13px; /* default value, change as per your need */
}

Answer 3

更改你的html就像打击

一样

其他方式添加评论，如打击

＆＃13;

{ 
{

  "Message": "RunAsync has been cancelled for a stateful service replica. The cancellation will be considered 'slow' if RunAsync does not halt execution within 4000 milliseconds.        
  "Level": "Informational",
  "Keywords": "0x0000F00000000000",
  "EventName": "StatefulRunAsyncCancellation",
  "Payload": {
[...]
"slowCancellationTimeMillis": 4000.0

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
}

＆＃13;

Answer 4

@Chao Wang为了消除这个差距，你必须在机器人中使用左浮动格

<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.first {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
  float:left;
}
.second {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  display: inline-block;
  float:left;
}

</style>
<div class="first"></div>
<div class="second"></div>

它将解决您的问题（y）

Answer 5

＆＃34;内联块＆＃34;由于父级的字体大小，元素具有此空间。 Here您可以找到更多详细信息以及如何删除空间的方法。其中一个最简单的方法是使用font-size = 0添加div父级：

<div style="font-size: 0;">
<div class="first"></div>
<div class="second"></div>
</div>

Answer 6

这是因为它使用行高

＆＃13;

.inline-parent{
  display:inline-block;
  width:100%;
  line-height:0;
  font-size:0;
}
.inline1{
  display:inline-block;
  width:50%;
  background:#333;
  line-height:1;
  font-size:15px;
}
.inline2{
  display:inline-block;
  width:50%;
  background:#999;
  line-height:1;
  font-size:15px;
}

＆＃13;

<div class="inline-parent">
<div class="inline1">
text text
</div>
<div class="inline2">
text text
</div>
</div>

＆＃13;

这完全是因为line-height和font-size

为什么DIV内联块盒之间存在间隙？

6 个答案: