How do I remove invisible space around text (Heading)?-CodePudding

So as the title say I put a color on top of an image and I then tried to put some text on top of it, but then all the div got moved to the bottom and the text got moved to the top of the div and when I inspect the heading, it shows a space colored in yellow. I'm trying to understand CSS position and I'm starting to understand it, but right now I don't understand haha. I think it's something with a margin, but I reinitialized it at the beginning of the CSS.

(Also sorry! If you feel the need to tell me that my CSS is bad don't hesitate to tell me off i want to learn from my mistake!)

The HTML

<div id="section3">
  <div id="layer">
     <h1>Parmi les premiers de classe !</h1>
  </div>
   </div>

And CSS

#section3 img {
  width: 1903px;
  margin-left: 0px;
  margin-top: -645px;
  z-index: 100;
}

#section3 h1 {
  margin-top: 260px;
  margin-left: 420px;
  font-size: 80px;
}

#section3 p {
  margin-top: 10px;
  margin-left: 590px;
  font-size: 30px;
}

.img4{
  position: relative;
  top: 641px;
}

#section3{
  background: url('../Images/CF3.jpg');
  position: relative;
  bottom:4px;
  width: 1903px;
  height: 930px;
}
#layer{
  background-color: #4c96eb75;
  width: 100%;
  height: 100%;
}

#layer h1{
  display: block;
}

The reset at the start of CSS

* {
  margin: 0;
  padding: 0;
  font-family: Segoe UI;
}

CodePudding user response：

Change the css to this:

#section3 img {
  width: 1903px;
  margin-left: 0px;
  margin-top: -645px;
  z-index: 100;
}

#section3 h1 {
  /* margin-top: 260px;
  margin-left: 420px; */
  font-size: 80px;
}

#section3 p {
  margin-top: 10px;
  margin-left: 590px;
  font-size: 30px;
}

.img4{
  position: relative;
  top: 641px;
}

#section3{
  background: url('../Images/CF3.jpg');
  position: relative;
  bottom:4px;
  width: 1903px;
  height: 930px;
}
#layer{
  background-color: #4c96eb75;
  width: 100%;
  height: 100%;
}

#layer h1{
  display: block;
  margin: 0;
}

I have added a margin:0, to the header and removed other styles margin for #section3 h1, that was the reason div was placed at the bottom and

CodePudding user response：

You used up higher values of height and width that's why it happened. I changed that:

#section3 h1 {
  /* margin-top: 260px;
  margin-left: 420px; */
  font-size: 80px;
}

#section3 p {
  margin-top: 10px;
  margin-left: 590px;
  font-size: 30px;
}

.img4{
  position: relative;
  top: 641px;
}

#section3{
  background: url('../Images/CF3.jpg');
  position: relative;
  bottom:4px;
  width: 390px;
  height: 300px;
}
#layer{
  background-color: #4c96eb75;
  width: 100%;
  height: 100%;
}

#layer h1{
  display: block;
  margin: 0;
}

<div id="section3">
  <div id="layer">
     <h1>Parmi les premiers de classe !</h1>
  </div>
   </div>