CODEWITHSUNDEEP
htmlheightfont-sizeline-height
HarpoBrothers
HarpoBrothers

Reputation: 3

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

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>

Upvotes: 0

Views: 35

Answers (2)

AJ Ande
AJ Ande

Reputation: 121

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.

Upvotes: 0

Harrison
Harrison

Reputation: 2365

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.

Upvotes: 1

Related Questions