Question 223086 in Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search