css how to adjust height of element content

Question

This is an example of html code :

<div class="container-fluid" id="about">
     <div class="row">
            <div id="mainsubtitle">Something</div>
            <h1>Validation of the email address</h1>
     </div>

</div>

How can I adjust height (blue area) of the div and h1 element to have

score 1 · Answer 1 · answered Apr 19 '22 at 18:55

1

You can use css line height property.

line-height: normal|number|length|initial|inherit;

answered Apr 19 '22 at 18:55

Vishal

34
7

score 1 · Accepted Answer · answered Apr 19 '22 at 18:56

1

My understanding from the screenshots to your question is that you are trying to reduce the blue space, so essentially the space between the words and the div and h1 elements.

You can try to play around with the line-height property. Example:

#mainsubtitle, h1 {
   line-height: 0.75;
}

The above example multiplies the current font-size with 0.75 to set the line height.

answered Apr 19 '22 at 18:56

Aaron

101
1
10

It works for h1 element but #mainsubtitle the G letter is outside the blue area. – Nicolas Apr 19 '22 at 19:07
The 0.75 value is just an example. You can try increasing the value a bit for #mainsubtitle. Or if you don't want to change the line-height value, you can add padding-bottom to #mainsubtitle – Aaron Apr 19 '22 at 19:17

score 0 · Answer 3 · answered Apr 19 '22 at 18:51

You can simply do it by adding padding to both elements.

h1, 
.mainsubtitle {
  padding: 32px 0; /* shorthand for padding-top: 32px, padding-bottom: 32px, padding-left/right: 0px */
}

<div class="container-fluid" id="about">
   <div class="row">
        <div id="mainsubtitle">Something</div>
        <h1>Validation of the email address</h1>
   </div>
</div>

css how to adjust height of element content

3 Answers3