如何将第二行文本上移至第一行文本顶部附近

嘿，这问题我太熟了！你遇到的情况大概率是没找对要调整样式的元素，或者默认的行高、内边距在捣乱，至于蓝色覆盖，应该是链接的默认聚焦/激活样式在搞事情。给你几个靠谱的解决办法：

1. 搞定文本间距：从行高和元素边距入手 #

首先确认你的两行文本是放在什么标签里的（比如两个<a>或者<p>）。如果是两个独立的链接元素，先重置它们的默认样式，再调整间距：

/* 假设文本链接在.elements-promo__content下 */
.elements-promo__content a {
  /* 去掉默认内外边距 */
  margin: 0;
  padding: 0;
  /* 缩小行高让两行更紧凑 */
  line-height: 1.2;
  /* 改成块级元素方便控制间距 */
  display: block;
}

/* 给第二行链接加负margin上移，数值按需调整 */
.elements-promo__content a:last-child {
  margin-top: -6px;
}

如果两行是同一个父容器里的两个子元素，用Flex布局会更省心：

.elements-promo__content {
  display: flex;
  flex-direction: column;
  /* 直接设置两行间距，想多近就调多小 */
  gap: 3px;
}

2. 解决蓝色覆盖问题 #

那个蓝色覆盖应该是链接被点击/聚焦时的默认轮廓或背景色，直接调整就行：

.elements-promo__content a:focus,
.elements-promo__content a:active {
  /* 去掉默认蓝色轮廓 */
  outline: none;
  /* 如果是背景色覆盖，清空它 */
  background-color: transparent;
}

小提醒 #

别盲目给父元素加负margin，很容易导致元素重叠或者点击区域混乱。先找到承载两行文本的直接子元素，再调整它们的间距，这样才精准。

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