CSS 动态生成的第二行div与第一行存在间距，如何消除且不影响内部文本对齐

你遇到的行间距过大问题是.tooltip类的全局margin设置导致的：当前给每个.tooltip元素设置了margin: 4em auto，意味着每个inline-block状态的标签上下都有4em的外边距，行与行之间的总间隙就是上一行标签的下margin + 下一行标签的上margin，最终出现了多余的大间隙。

仅需要修改.tooltip的CSS规则即可，既保留原有所有功能，也不会影响内部文本对齐效果：

.tooltip {
  position: relative;
  display: inline-block;
  width: auto;
  height: 1.6em;
  line-height: 1.6em; /* 新增：和height值保持一致，保证文字垂直居中对齐 */
  margin: 0.2em 0.4em; /* 修改：把上下4em的大边距改成小边距，左右边距可替代原来的 做横向间隔，你可以根据需要调整数值 */
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10%/50%;
  background: linear-gradient(to right, #11998E , #38EF7D);
  font-weight: 700;
}

.tooltip .tooltiptext {
  visibility: hidden;
  /* 以下定位规则为可选添加，避免tooltip显示时挤压其他元素位置 */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

修改后你可以根据自己想要的行间距大小，调整margin的第一个数值，数值越小行间距越窄，调为0就会完全紧贴。原有JS和HTML代码不需要做任何改动，动态创建标签、hover提示的功能都可以正常运行。

内容的提问来源于stack exchange，提问作者Bobby Brahmam