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

Posted 2023-03-06

【中文标题】如何去除这种类型的元素重叠？ [复制]

【英文标题】：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>

【参考方案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>