How to remove margins around background color

Question

For some reason the code below will output a black background that has white margins around it. I even have margin: 0px but for some reason the margins are still there. I have tried to set all the other elements to 0 margin but that didn't work either.

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0px;
  color: #fff;
}

<section id="welcome-section" class="welcome-section">
  <h1>Hello My name is Ben</h1>
  <p>A Web Developer </p>
</section>

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0px;
}

There is nothing in the code you've posted that would cause white margins to appear. You probably have other style-rules elsewhere that are affecting your page's appearance. — Dai, Mar 04 '20 at 03:45
If you see the code in chrome devtools you will find that there is `margin:8px` given to `` the answer given by `hiren` and `kp86284` should do the job. — Abhishek Pakhare, Mar 04 '20 at 04:22
To add to what others have already said - many browser render the "default" values of certain things slightly different from one another. In this case, the `` has a default margin built in. There are libraries out there such as normalize.css that try to address this. https://necolas.github.io/normalize.css/ — Ryan Green, Mar 04 '20 at 04:51

kp86284 · Accepted Answer · 2020-03-04T04:49:14.957

use this code

body {
    margin: 0;
    padding: 0;
}
.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0px;
  color: #fff;
}

<section id="welcome-section" class="welcome-section">
    <h1>Hello My name is Ben</h1>
    <p>A Web Developer </p>
  </section>

add in your css :-

body {
    margin: 0;
    padding: 0;
}

score -1 · Answer 2 · answered Mar 04 '20 at 03:53

-1

You could try adding border: 0 to your style rules. It sounds like by 'margin' you mean border

It's likely something else on the page is setting a border. You really should share a full example though.

answered Mar 04 '20 at 03:53

Adam Heath

4,703
2
35
50

score -1 · Answer 3 · answered Mar 04 '20 at 04:11

-1

Try this, Add this to your css

body{
    margin: 0%;
}

It will fit background color to the border.

answered Mar 04 '20 at 04:11

Hiran

7
2

How to remove margins around background color

3 Answers3