如何使我的文本更接近我的标题？

Question

我想让我的小文本更接近我的大文本？我该怎么做？

从我的中提取一些

<div class="header">
        <br>
        <br>
        <br>
        <br>
        
    <h1>Summit</h1>
    <p>Climb the summit, then simply sum it</p>

    </div>

我的一些CSS

.header h1 {
    font-family: 'Baloo 2', cursive;
    Font-size: 70px;
    color: #22223b;
    margin-top: 300px;
    padding-left: 60px;
}

.header p {
    font-family: 'Baloo 2', cursive;
    Font-size: 20px;
    color: #22223b;
    padding-left: 60px;
    padding-top: 0px;
    margin-top: 0px;
}

谢谢!

Answer 1

在HTML中，默认情况下，<h1>标记会给出页边距。所以，您可以在CSS中修改它。

喜欢,

header h1{
   margin: 0;
}

如果您想要更具体，您可以使用margin-bottom: 0;而不是边距。

Answer 2

HTML中的每个元素都有自己的边距和边框。标头元素通常定义了它们的margin-bottom CSS。

因此，您有两种方法可以这样做:要么可以修改<h1> margin-bottom值。或者你可以给<p>一个负的马丁-顶值。

Option1：

.header h1 {
    margin-bottom: 0;
}

备选案文2：

.header p {
    margin-top: -5px;
}

Answer 3

大概小的文本是段落，大的文本是h1，但是您没有指定有多接近.调整边距和填充通常是一个好的开端。

您可以使用单个定义来定义填充和边距，但提供4个值(上、右、下、左)。

​

.header h1 {
  font-family: 'Baloo 2', cursive;
  Font-size: 70px;
  color: #22223b;
  margin: 300px 0 0 0;
  padding: 0 0 0 60px;
}

.header p {
  font-family: 'Baloo 2', cursive;
  Font-size: 20px;
  color: #22223b;

  padding: 0 0 0 60px;
  margin: -1.5rem 0 0 0;
}

<div class="header">
  <h1>Summit</h1>
  <p>Climb the summit, then simply sum it</p>

</div>

​