Left border for text should have same height as text

Question

I'm trying to make the parent div's left border the exact same height as the text inside the div.

Here's the problem:

My code is simple:

#box {
  width: 500px;
  padding-left: 2rem;
  border-color: #01B288;
  border-style: solid;
  border-width: 0 0 0 3px;
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

<div id="box">
  <h1>BIGGER FONT EXAMPLE</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>

I found a solution that only works for one block of text, but I have 2 blocks inside the same div.

`line-height` (or "Leading" in traditional typography) accounts for the total height of the letterform (i.e. from the top of the ascender to the bottom of the descender) and the additional space, and creates an invisible rectangular area. That is, any `line-height` greater than `1` will result in _some_ open space to the top and bottom of a given line. See [this diagram](https://tutorial.techaltum.com/images/font.jpg). — Bumhan Yu, Sep 23 '22 at 14:06
The green border goes beyond the top of the B letter from the word BIGGER. I want the green border to stop exactly at the top of letter B. https://i.imgur.com/o3ptVvE.png — Mr. Fontastic, Sep 23 '22 at 14:08
there's a similar question addressing the same issue here: https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element and some solutions were given ... maybe in your case a solution could be to `position:absolute` accounting the whole box relative to a container and moving the top enough until the spacing is compensated. Of course your `line-height: 1.2` can't be changed because that's by design how you want lines of text to be spaced — Diego D, Sep 23 '22 at 14:09
Your text elements have `line-height` of `1.2`, which adds small amount of white space to the top and bottom (as shown [here](https://tutorial.techaltum.com/images/font.jpg)). Essentially, you seem to want to _cut off_ the top part of `line-height`. You _can_ achieve it with some manual work if you want to. — Bumhan Yu, Sep 23 '22 at 14:09
Even with line-height set to 1, the space exists. And I can't have line-height so tight. Yes, I need to cut off the top part for the top text and bottom part for the bottom text. — Mr. Fontastic, Sep 23 '22 at 14:11
Upvoted as I'm curious about potential solution to this. Web typography unfortunately isn't as thoroughly controlled as with traditional print typography, which makes it a seemingly simple task like this very challenging. — Bumhan Yu, Sep 24 '22 at 02:13

Rok Benko · Answer 1 · 2022-09-23T14:43:20.533

Use ::before CSS selector.

See the snippet below.

#box {
  position: relative;
  width: 500px;
  height: auto;
  padding-left: 2rem;
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

#box::before {
  content: "";
  width: 3px;
  height: 95%;
  background-color: #01B288;
  left: 0;
  bottom: 0;
  position: absolute;
  display: block;
}

<div id="box">
  <h1>BIGGER FONT EXAMPLE</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>

EDIT 1

Use @media query and set different height for mobile. It's currently set to 50% if the viewport is smaller than 576px (50% is obviously too much, so you can see the effect).

See the snippet below.

#box {
  position: relative;
  width: 500px;
  height: auto;
  padding-left: 2rem;
  overflow: hidden;
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

#box::before {
  content: "";
  width: 3px;
  height: 95%;
  background-color: #01B288;
  left: 0;
  bottom: 0;
  position: absolute;
  display: block;
}

@media screen and (max-width: 576px) {
  #box::before {
    height: 50%;
  }
}

<div id="box">
  <h1>BIGGER FONT EXAMPLE</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>

EDIT 2

What about if you remove line-height only from the first line?

See the snippet below.

#box {
  position: relative;
  width: 500px;
  height: auto;
  padding-left: 2rem;
  overflow: hidden;
}

h1 {
  font-size: 80px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

p {
  font-size: 20px;
  font-family: Arial;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

#box::before {
  content: "";
  width: 3px;
  height: 100%;
  background-color: #01B288;
  left: 0;
  bottom: 0;
  position: absolute;
  display: block;
}

h1:first-line {
  line-height: 0.8;
}

<div id="box">
  <h1>BIGGER FONT EXAMPLE</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>

The issue with this solution is the height set at 95%, because when I look at it on a mobile phone, the green border gets smaller than the text. — Mr. Fontastic, Sep 23 '22 at 14:16
Thanks! But is there a way to make it fully responsive, rather than creating different heights for different viewports? Because there will be issues with different dpi on iPad tablets, for instance. — Mr. Fontastic, Sep 23 '22 at 14:32
It's not working, even the code snippet you created doesn't look like it should. — Mr. Fontastic, Sep 23 '22 at 14:51

T-S · Answer 2 · 2022-09-23T19:08:39.103

So have a look at the code below. If you remove the margins and set the line-height to the same height (1em for example) for all the elements in the div that its concerning then you can recreate the line like below.

It might be minimal but if your going to use a different font and it's a bit off just play with the calc(1em / ..). If your going to change te line-height you might try to fiddle with calc(..em / 8).

body{ font-family: Arial, sans-serif; }
h1{ font-size: 80px; }
p{ font-size: 20px; }

div > *{
  position: relative;
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

div > *::before {
  position: absolute;
  content: '';
  border-left: 3px solid DarkSeaGreen;
  height: 100%;
  left: -5px;
}

div > *:first-child::before{ top: calc(1em / 8); }
div > *:last-child::before { bottom: calc(1em / 8); }

<div>
  <h1>BIGGER FONT EXAMPLE</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>

UmairFarooq · Answer 3 · 2022-09-23T14:47:59.617

-2

Using :Before selector with height:93% of its parent and eyeballing it from top:5.5%

#box {
width: 500px;
padding-left: 2rem;
position:relative;
}
#box:before{
content:"";
position:absolute;
height:93%;
top:7%;
left:0;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;    
line-height: 1.2;
margin:0;
padding:0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}

<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>

edited Sep 23 '22 at 14:47

answered Sep 23 '22 at 14:15

UmairFarooq

1,269
1
3
8

This is close to perfect. Unfortunately, on mobile, the green line is smaller than the text. I guess it's a percentage thing, the height or top? – Mr. Fontastic Sep 23 '22 at 14:20
I don't think it should change in any case. unless something else is interfering because i am setting its height to 93% if the div. so no matter if the divs is 10 or 1000 it will always be 93%.for 10 it it will be 9.3 & for 100 it will be 93 https://imgur.com/a/GcxhGEx – UmairFarooq Sep 23 '22 at 14:44
Well, then the issue is the top 5.5%, because on mobile it doesn't align anymore. – Mr. Fontastic Sep 23 '22 at 14:46
it does https://imgur.com/a/GcxhGEx. – UmairFarooq Sep 23 '22 at 14:46
you can also set it to that 100-93=7px. which i added in the snippet but i dnt think it is perfect – UmairFarooq Sep 23 '22 at 14:48
Well, setting it as top:7% doesn't align on desktop anymore. – Mr. Fontastic Sep 23 '22 at 14:50
7.7% it is then ‍♂️ – UmairFarooq Sep 23 '22 at 14:55

Left border for text should have same height as text

3 Answers3