我怎样才能让我的文字更接近我的 header？

Question

我想让我的小文字更靠近我的大文字吗？我该怎么做？

我的一些HTML

<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 中的每个元素都有自己的边距和边框。 header 元素通常有 margin-bottom CSS 定义。

所以你有两种方法可以做到这一点：要么你可以修改 <h1> margin-bottom 值。或者您可以给 <p> 一个负 martin-top 值。

选项 1:

.header h1 {
    margin-bottom: 0;
}

选项 2：

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

Answer 2

大概小文本是段落，大文本是 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>

Answer 3

在HTML中，<h1>标签默认给出边距。因此，您可以在 CSS.

中修改它

喜欢，

header h1{
   margin: 0;
}

如果要具体，可以用margin-bottom: 0;代替margin。

我怎样才能让我的文字更接近我的 header？

How can I make my text closer to my header?

html

css

web