Align gap to top of container
It looks like when the line length is 1.1 times the font size becomes vertically centered. Could this be vertically aligned?
In this example
p {
background-color: pink;
font-size: 20px;
line-height: 40px
}
span {
background-color: lightblue;
}
<p>
<span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>
I want the text to lean against the top of the pink box. Any extra pink space will be below the blue, not split above and below each line. The blue box is leaning against the top of the pink one. I haven't found vertical-align: top
or added line-height
to the range to help.
(Edited to show that text can be very long.)
source to share
To keep the line height, you can add display: inline-block;
an element to the range.
p {
background-color: pink;
font-size: 20px;
line-height: 40px
}
span {
background-color: lightblue;
display: inline-block;
}
<p>
<span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>
source to share
Contrary to Daniel's answer, but I think this also suits your requirements?
p {
background-color: pink;
font-size: 20px;
vertical-align: top;
height: 40px;
}
span {
background-color: lightblue;
}
<p>
<span>Hello World</span> Hello World
</p>
Well, if your text is multi-line, I could only think of this solution:
$("#fontsize-input").on("input",() => {
$("p").css("font-size",$("#fontsize-input").val()+"px");
});
p {
background-color: pink;
font-size: 25px;
line-height: 2em;
}
span {
position: relative;
top: calc(-0.45em + 1px);
}
.highlight {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="10" max="40" id="fontsize-input"/>
<p>
<span class="highlight">Hello World</span> <span>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</span>
</p>
source to share
Solution using gasket:
p {
background-color: pink;
font-size: 20px;
padding: 0 0 20px 0;
/* padding for top,right,bot,left */
}
span {
background-color: lightblue;
}
<p>
<span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>
source to share