Reputation: 126
hope you can help with this:
I have this 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>
I would need the span to move slightly above the line so it is a bit higher than the rest of the h1, I tried with padding but it moves the border and not the text, also margin is not helping. Any suggestion?
thanks
Upvotes: 0
Views: 583
Reputation: 4473
You can use the CSS transform properties for such purposes.
article span {
color: cadetblue;
padding-bottom: 0.2rem;
border-bottom: 0.4rem solid rgb(236, 230, 230);
display: inline-block;
transform: translateY(-10px);
}
First thing, we set span to be displayed as inline-block element so that transform and other properties like width, margin etc can be applied. After that we set transform properties to translateY, which essentially says to move the element along vertical axis. Negative value is provided to move element upward.
Upvotes: 0
Reputation: 7066
Add position:relative;
and top:-20;
.
You can make the inline element as
inline-block
and play around with extra code, so this will lead you to have more and more code(so I rule this out).
Another Option:
There is already a code here which talks about
relative
, you can refer that well.relative
will keep the layout in place.
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>
Upvotes: -1
Reputation: 56853
Whenever you need to alter the position of an element, that is, move it some distance from where it would normally appear, position: relative
is your friend.
You can use
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>
Upvotes: 2