如何删除这种类型的重叠元素？

Question

我有一个非常简单的div和anchors，我希望它们可以用作block和inline元素，但是它们有不必要的重叠。我尝试在两个元素上都设置box-sizing:border-box;，也都设置了margin:0，但是没有机会。

我应该如何更改代码，以便所有元素都保留在自己的位置？

编辑：我正在Chrome 72.0.3626.109版中测试结果，锚点元素顶部和红色div底部重叠。

.bar{
 height:20px;
 background:#ff0000;
 margin:0;
 padding:0;
 box-sizing:border-box;
}

.changeTab{
  padding:10px;
  text-align:center;
  background:#000000;
  color:#ffffff;
  line-height:25px;
  height:25px;
  box-sizing:border-box;
  margin:0;
}

<div class="bar"><span></span></div>
<a class="changeTab">Home</a>
<a class="changeTab">About</a>

Answer 1

将“链接”的显示更改为inline-block

.bar{
 height:20px;
 background:#ff0000;
 margin:0;
 padding:0;
 box-sizing:border-box;
}

.changeTab{
  padding:10px;
  text-align:center;
  background:#000000;
  color:#ffffff;
  height:25px;
  display: inline-block;
  margin:0;
}

<div class="bar"><span></span></div>
<a class="changeTab">Home</a>
<a class="changeTab">About</a>

Answer 2

只需将链接（a）更改为另一种显示行为->内联块。 并删除或优化链接上的高度。

.changeTab{
  ....
  display: inline-block;
}

Codepen

Answer 3

这是因为<a>标签是inline元素，并且它对top和bottom padding的响应不同，它是从元素的中心和{ {1}}个元素不响应inline和top bottom

http://maxdesign.com.au/articles/inline/

  

内联元素

     

W3C的CSS2规范将内联元素定义为“源元素   没有构成新内容块的文档；内容是   按行分配”。因此，内联内容显示为无行   在之前或之后中断。

margin

.bar {
  height: 20px;
  background: #ff0000;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.changeTab {
  padding: 10px;
  text-align: center;
  background: #000000;
  color: #ffffff;
  /*line-height: 25px;
  height: 25px;*/
  box-sizing: border-box;
  margin: 0;
  display: inline-block;
}

Answer 4

在div内添加margin-bottom。 <div class="bar" style="margin-bottom: 6px;"></div>