CODEWITHSUNDEEP
htmlcss
Bhanu0202
Bhanu0202

Reputation: 18

why is there this extra section in my code?

checkout this codepen[https://codepen.io/pen/]

Whenever I enter an element like h1 or p, this extra space comes into the design. If I remove the h1 in #second, this space is removed. I donot know why it is there. thanks.

my code:

* {
  box-sizing: border-box;
}

#container {
  width: 400px;
  background-color: gray;
  height: 800px;
  margin: 20px auto;
  box-shadow: 5px 5px 15px #BEBEBE;
}

#first {
  height: 250px;
  background-image: url(https://wallpapercave.com/wp/KLaNOxd.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 2px solid red;
}

#second {
  background-color: white;
  height: 530px;
}
<body>
  <div id="container">
    <div id="first">
    </div>
    <div id="second">
      <div class="today">
        <h1>bgbjbgjrgjn</h1>
      </div>
      <div class="tommorow"></div>
    </div>
  </div>
</body>

code image

Upvotes: 0

Views: 99

Answers (3)

Gufran Hasan
Gufran Hasan

Reputation: 9391

This is because of default margin applying on <h1> tag. So please add this CSS.

h1 {
    padding: 0;
    margin: 0;
 }

Note: As <h1> tag gets a default margin of bootstraps or from others Style.

Upvotes: 1

Milos Medic
Milos Medic

Reputation: 11

It's because of default user agent stylesheet. Different browsers set different default CSS rules, so in your example h1 tag has this style by default:

margin-block-start: 0.67em; 
margin-block-end: 0.67em;

You can add this css property to your css code and it will fix your issue:

#second h1{
    margin:0;
}

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50954

This happens because h1 and p elements have a default margin applied to them, which causes a space.

h1 {
  margin: 0;
}

Setting the margin: 0 to your h1 element will resolve your issue. I also suggest you make a class and apply this style to your class so you're not affecting all h1 tags on your page.

See working example below:

<style>
  * {
    box-sizing: border-box;
  }
  
  #container {
    width: 400px;
    background-color: gray;
    height: 800px;
    margin: 20px auto;
    box-shadow: 5px 5px 15px #BEBEBE;
  }
  
  #first {
    height: 250px;
    background-image: url(https://wallpapercave.com/wp/KLaNOxd.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 2px solid red;
  }
  
  #second {
    background-color: white;
    height: 530px;
  }
  
  .no-margin { /* remove the margin */
    margin: 0;
  }
</style>

<body>
  <div id="container">
    <div id="first">
    </div>
    <div id="second">
      <div class="today">
        <h1 class="no-margin">bgbjbgjrgjn</h1>
      </div>
      <div class="tommorow"></div>
         
    </div>
  </div>
</body>

Upvotes: 2

Related Questions