如何去除这种类型的元素重叠？ [复制]答案

【问题标题】：how to remove this type of elements overlap? [duplicate]如何去除这种类型的元素重叠？ [复制]
【发布时间】：2019-07-12 15:02:49
【问题描述】：

我有非常简单的 div 和锚点，我希望它们充当 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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

Codepen

【讨论】：

【解决方案3】：

因为<a>标签是inline元素，它对top和bottom的响应不同padding它从元素的中心计算，inline元素不响应@987654328 @和bottommargin

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

内联元素

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：