CODEWITHSUNDEEP
csstext-size
comp1201
comp1201

Reputation: 415

Make elements fill the same line space with different font sizes

I'd like to make these elements fill the same line space with different font sizes. As you can see the first element "sets the standard" for the line height. All the following elements have white space above and below them. Regardless of the font size I want all the elements to fill the same space (%100 of line height). Anybody know? Thanks!

    body{ 
        background-color: #ffffff;
        background-size: cover;
        border: 5px solid yellow;
        margin: 0px;
        padding: 0px;
    }
    
    .head1{
        text-align: center;
        display:inline-block;
        background-color: cornflowerblue;
        border: 5px solid black;
        padding: 0px;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    #par1{
        display: inline-block;
        background-color: aqua;
        border: 5px solid pink;
        margin: 0px;
    }
    
    #par2{
        display: inline-block;
        background-color: crimson;
        color: #ffffff;
        border: 5px solid green;
        margin: 0px;  
    }   
        
<h1 class="head1">Site title!</h1><p id="par1"> Here is some text! Format all this with HTML.</p><h2 class="head1">Header here.</h2><h2 class="head1">Another header.</h2><p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

Upvotes: 0

Views: 2506

Answers (2)

Jason bamber
Jason bamber

Reputation: 459

You can set the same line-height for all, and set vertical-align to middle:

.head1, #par1,#par2{
  line-height:28px;
  vertical-align:center;
}

if you cant do that for some reason (must handle unknown font sizes), you can place your items in a wrapper and use flexbox:

.head1, #par1,#par2{
  display: flex;
  align-items: center;

}
.wrap{
  display:flex;
  flex-wrap: wrap;
}

<div class="wrap">

    <h1 class="head1">Site title!</h1>
    <p id="par1"> Here is some text! Format all this with HTML.</p>
    <h2 class="head1">Header here.</h2>
    <h2 class="head1">Another header.</h2>
    <p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272817

An idea is to use flexbox and rely on the stretch effect but you should adjust the alignment.

body {
  background-color: #ffffff;
  background-size: cover;
  border: 5px solid yellow;
  margin: 0px;
  padding: 0px;
  display:flex;
  flex-wrap:wrap;
}

.head1 {
  text-align: center;
  display: inline-flex;
  background-color: cornflowerblue;
  border: 5px solid black;
  padding: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#par1 {
  display: inline-flex;
  align-items:center;
  background-color: aqua;
  border: 5px solid pink;
  margin: 0px;
}

#par2 {
  display: inline-flex;
  align-items:center;
  background-color: crimson;
  color: #ffffff;
  border: 5px solid green;
  margin: 0px;
}
<h1 class="head1">Site title!</h1>
<p id="par1"> Here is some text! Format all this with HTML.</p>
<h2 class="head1">Header here.</h2>
<h2 class="head1">Another header.</h2>
<p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

Or adjust the line-height for all the elements to the biggest one:

body {
  background-color: #ffffff;
  background-size: cover;
  border: 5px solid yellow;
  margin: 0px;
  padding: 0px;
  flex-wrap:wrap;
}

body > * {
  line-height:37px;
  vertical-align:bottom;
}

.head1 {
  text-align: center;
  display: inline-block;
  background-color: cornflowerblue;
  border: 5px solid black;
  padding: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#par1 {
  display: inline-block;
  align-items:center;
  background-color: aqua;
  border: 5px solid pink;
  margin: 0px;
}

#par2 {
  display: inline-block;
  align-items:center;
  background-color: crimson;
  color: #ffffff;
  border: 5px solid green;
  margin: 0px;
}
<h1 class="head1">Site title!</h1><p id="par1"> Here is some text! Format all this with HTML.</p><h2 class="head1">Header here.</h2><h2 class="head1">Another header.</h2><p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

Upvotes: 0

Related Questions