将标题的一部分稍微移到css上方

Question

希望您能对此提供帮助：

我有这个html:

article {
text-align: center;
background-image: url(img/background.jpg);
height: 20rem;
}
article h1 {
font-size: 4rem;
}
article span {
color: cadetblue;
padding-bottom: 0.2rem;
border-bottom: 0.4rem solid rgb(236, 230, 230);
}

<article>
<h1>Hi, I am <span>web weeb.</span></h1>
<h2>I'm a Full-stack Web Developer.</h2>
</article>

我需要跨度稍微移动到线上方，这样它就比h1的其余部分高一点，我尝试了填充，但它移动的是边框，而不是文本，边距也没有帮助。有什么建议吗？

感谢

Answer 1

每当您需要更改元素的位置，即将其从通常出现的位置移动一段距离时，position: relative就是您的朋友。

你可以使用

position: relative;
top: -30px;

article {
text-align: center;
background-image: url(img/background.jpg);
height: 20rem;
}
article h1 {
font-size: 4rem;
}
article span {
color: cadetblue;
padding-bottom: 0.2rem;
border-bottom: 0.4rem solid rgb(236, 230, 230);
position: relative;
top: -30px;
}

<article>
<h1>Hi, I am <span>web weeb.</span></h1>
<h2>I'm a Full-stack Web Developer.</h2>
</article>

Answer 2

您可以将CSS转换属性用于此类目的。

article span {
color: cadetblue;
padding-bottom: 0.2rem;
border-bottom: 0.4rem solid rgb(236, 230, 230);
display: inline-block;
transform: translateY(-10px);
}

首先，我们将跨度设置为显示为内联块元素，以便可以应用转换和其他属性，如宽度、边距等。之后，我们将transform属性设置为translateY，这基本上表示沿垂直轴移动元素。提供负值以向上移动元素。

Answer 3

添加position:relative;和top:-20;。

您可以将内联元素制作为inline-block，并使用额外的代码，因此这将导致您拥有越来越多的代码(因此我排除了这种情况(。

另一种选择：

这里已经有一个关于relative的代码，你可以很好地参考它。relative将保持布局。

article {
text-align: center;
background-image: url(img/background.jpg);
height: 20rem;
}
article h1 {
font-size: 4rem;
}
span {
color: cadetblue;
position: relative;
border-bottom: 0.4rem solid rgb(236, 230, 230);
border: 1px solid red;
top: -20px;
}

<article>
<h1>Hi, I am <span>web weeb.</span></h1>
<h2>I'm a Full-stack Web Developer.</h2>
</article>