Заставить элементы заполнить одно и то же пространство строки разными размерами шрифта - PullRequest
Новая
       32

Заставить элементы заполнить одно и то же пространство строки разными размерами шрифта

0 голосов
/ 10 сентября 2018

Я бы хотел, чтобы эти элементы заполняли одно и то же пространство строк разными размерами шрифта.Как видите, первый элемент «устанавливает стандарт» для высоты строки.Все следующие элементы имеют пустое пространство над и под ними.Независимо от размера шрифта я хочу, чтобы все элементы занимали одинаковое пространство (% 100 от высоты строки).Кто-нибудь знает?Спасибо! 

    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>

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вы можете установить одинаковую высоту строки для всех и установить вертикальное выравнивание по центру: 

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

, если вы не можете сделать это по какой-то причине (должны обрабатывать шрифты неизвестного размера), вы можете поместитьваши вещи в обертке и используйте 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>
0 голосов
/ 10 сентября 2018

Идея состоит в том, чтобы использовать flexbox и полагаться на эффект растяжения, но вы должны отрегулировать выравнивание. 

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>

Или настройте высоту строки для всех элементов на самый большой: 

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>
...