Question

我想使这些元素以不同的字体大小填充相同的行空间。如您所见，第一个元素“为行高设置了标准”。以下所有元素在其上方和下方都有空白。无论字体大小如何，我都希望所有元素都填充相同的空间（行高的％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>

Answer 1

一个想法是使用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>

Answer 2

您可以为所有像素设置相同的行高，并将“ vertical-align”设置为“ medium”：

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

使元素使用不同的字体大小填充相同的行空间

2 个答案: