How can I make my text closer to my header?-CodePudding

I want to make my small text closer to my bigger text? How do I do this?

Some off my HTML

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

    </div>

Some of my 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;
}

Thanks!

CodePudding user response：

In HTML, <h1> tag gives margin by default. So, you can modify that in CSS.

Like,

header h1{
   margin: 0;
}

If you want to be specific, you can use margin-bottom: 0; instead of margin.

CodePudding user response：

Each element in HTML has their own margin and border. The header elements usually have their margin-bottom CSS defined.

So you have 2 ways to do this: Either you can modify <h1> margin-bottom value. Or you can give <p> a negative martin-top value.

Option1:

.header h1 {
    margin-bottom: 0;
}

Option 2:

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

CodePudding user response：

Presumably the small text is the paragraph and the big text is the h1 but you did not specify how close... Adjust the margins and padding is usually a good start.

You can use a single definition to define both padding & margin - but supply 4 values (top,right,bottom,left)

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