How can I make the text the same height as the box

Question

I got the 2 div boxes and I want the text to be the same height as the box.

I tried setting 2rem for both the font-size and the box height. Obviously that is not how I make text and box the same height.

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Grid starting point</title>
  <style>
     :root {
      font-size: 1em;
    }
    
    .offer {
      font-size: 2rem;
      display: inline-block;
    }
    
    .box {
      width: 2rem;
      height: 2rem;
      background-color: #990000;
      display: inline-block;
    }
  </style>
</head>

<body>
  <header>
    <div class="offer">CARS FOR SALE</div>
    <div class="box"></div>
  </header>
</body>

</html>

Is it helping you? [Remove white space above and below large text in an inline-block element](https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element) — César Venzac, Aug 04 '23 at 14:31

score 1 · Accepted Answer · answered Aug 04 '23 at 14:43

You could use an ::after pseudo-element combined with the aspect-ratio property.

As the comments point out, the text increases the parent div height (which is always a little annoying) so you can adjust the line-height and font-size in order to counter that.

.offer {
  position: relative;
  font-size: 2rem;
  line-height: 1.5rem;
}

.offer::after {
  content: "";
  height: 100%;
  aspect-ratio: 1 / 1;
  background-color: #990000;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Grid starting point</title>
</head>

<body>
  <header>
    <div class="offer">CARS FOR SALE</div>
  </header>
</body>

</html>

NOTE: Thanks to César Venzac for pointing out this SO link that discusses changing the line-height.

Great,@HarpoBrothers don't forget to accept the answer with the green checkmark — Harrison, Aug 04 '23 at 15:19

score 0 · Answer 2 · answered Aug 04 '23 at 15:51

You could use flexbox to adjust the positioning of the elements as they resize.

Html:

 <div class="wrapper">
    <div class="text">Size</div>
    <div class="card-box"></div>
  </div>

Css:

.wrapper {
      /*background:#efefef;*/
      display:flex;
      margin:40px;
    }

    .wrapper .text {
      width:60px;
      height:60px;
      display:flex;
      align-items:center;
      justify-content:center;
     /*background:rgb(242, 242, 245);*/
      font-size:74px;
    }

    .wrapper .card-box {
      width:60px;
      height:60px;
      background:#cecaca;
      margin-left:40px;
    }

Uncomment the css to see the process.

How can I make the text the same height as the box

2 Answers2