当我在div标签中放置h1标签时，为什么div标签之间会有空格？

Question

此html代码在此图像中添加了一个空格：

但是，我不想在div之间留空格，

而且，当我删除h1标签时，它会删除空格

有人可以帮我吗？任何帮助将不胜感激！

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
}

<div class="div" style="height: 200px; width: 55%">
  <p style="font-size: 25px;">RHT</p>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Answer 1

您的内联元素（将divs设置为display: inline-table）正在尝试根据文本基线进行排列。因为并非所有文本都具有相同的字体大小，所以创建了间隙。请注意文本在此屏幕截图中的排列方式：

将vertical-align属性更改为top之类的内容将更改这些内联元素的对齐方式。这样可以消除差距，但是我不确定为什么要使用inline-table。

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
  vertical-align: top;
}

<div class="div" style="height: 200px; width: 55%">
  <p style="font-size: 25px;">RHT</p>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Answer 2

那是因为display属性。一种解决方案是使用h1 { display: inline }。

.div {
  border-style: solid;
  display: inline-table;
  border-color: #91b8f7;
}
h1 {
  display: inline;
}

<div class="div" style="height: 200px; width: 55%">
  <h1>hello</h1>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>

Answer 3

该间隙由包含以下字母的p标签生成：RHT，因为它的字体大小和边距。您可以通过从该div中删除字体大小或为代码中的每个p标签赋予0的空白来“解决”该问题。无论哪种方式，我都希望使用CSS网格布局或flex-box生成所需的代码结构。

Answer 4

此方法使用display: table-cell;和float: left;。没有触摸h标签。 div之间的空间已删除。

.div {
  border: 1px solid #91b8f7;
  display: table-cell;
  border-color: #91b8f7;
  float: left;
  word-wrap: break-word;
}

<div class="div" style="height: 200px; width: 55%">
  <p style="font-size: 25px;">RHT</p>
</div>
<div class="div" style="height: 200px; width: 30%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 15%">
  <p>dsfdsfdsfsfds</p>
</div>
<!-- new row -->
<div class="div" style="height: 200px; width: 34%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 21%">
  <p>dsfdsfdsfsfds</p>
</div>
<div class="div" style="height: 200px; width: 45%">
  <p>dsfdsfdsfsfds</p>
</div>
<div style="display: block;">
  <h2 style="float: left; padding-left: 64%">
    TITLE
  </h2>