内联块元素之间的垂直空间小于字体

Question

首先，我知道在内联块元素之间导致水平空格的字母间距问题。这不是另一个问题。

相反，我有一个高宽度的内嵌块元素，我希望它的下一个邻居可以直接从下面与它相邻，但是它们之间总是有一个看起来与之相关的空间。行高。

我已经尝试了我能想到的垂直对齐，字体大小和线高的每种组合。任何人都有创造性的方法来删除那个空格？

＆＃13;

＆＃13;

public void actionPerformed(ActionEvent e)
{
    JTableList.add(new JTable(getModel()));
    JScrollPane tableContainer = new JScrollPane(JTableList.get(JTableList.size()-1));
    panelClass.this.panel.add(tableContainer);
    panelClass.this.panel.add(new JButton("test"));

    panelClass.this.validate();
    panelClass.this.repaint();
}

＆＃13;

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么会这样？

父元素font-size（在本例中为body）影响inline-block div，基本上将它们视为文本。

我们如何保持元素inline-block没有空格？

此示例中的父元素body被赋予font-size: 0，然后您将为子元素提供font-size：

＆＃13;

＆＃13;

body {
font-size: 0;
}
.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
}

＆＃13;

<div class="blue"></div>
<div class="red"></div>

＆＃13;

＆＃13;

＆＃13;

我们应该这样做吗？

我无法想到实际使用此功能，请使用display: block。

Answer 2

漂浮他们？

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  width: 100%;
  height:5px;
  display: inline-block;
  float:left;
}

<div class="blue"></div>
<div class="red"></div>

Answer 3

如果您想使用100％宽度，那么为什么不使用display: block而不是内联块。

注意： 如果你想使用浮动，它是一个很好的做法，以后清除它。 使用float时，不需要显示属性，因为Float会处理它。

＆＃13;

＆＃13;

.blue{background:blue;}
.red{background:red;}

.blue,.red{
  height:5px;
  display: block;
}

＆＃13;

<div class="blue"></div>
<div class="red"></div>

＆＃13;

＆＃13;

＆＃13;