How can two section be connected if the latter have h1 in starting line?-CodePudding

<section >
</section>
<section >
 <h1>something is here</h1>
</section>

If I were to give a background color to both the section, they appeared seperated. How can make the separation gone?

CodePudding user response：

Give them both the same background and make sure they have margin: 0

CodePudding user response：

Browsers can have default settings for margins on some element types.

In this case you are seeing a default margin on the h1.

This snippet explicitly removes this, but sometimes you will see style sheets starting with

* {
  margin: 0;
  padding: 0;
}

to ensure the defaults are removed for everything and then add the required settings in explicitly.

.first {
  background: pink;
  height: 100px;
}

.second {
  background: cyan;
}

.second h1 {
  margin: 0;
}

<section >
</section>
<section >
  <h1>something is here</h1>
</section>

Note: you can find out what is setting margins etc by using your browser's dev tools inspect facility, look at a specific element and you will see all the styles that have been applied and where they came from.