How to eliminate whitespace around background color?

Question

I am trying to get rid of the white spaces around the orange background color (top, right, and left). I was thinking of using position property to extend the height and width, but not sure if that's a good idea. Sorry, I am kind of new to this.

html {
  box-sizing: border-box;
}

.profile-image {
  height: 8rem;
  width: 8rem;
  border-radius: 20rem;
}

.profile {
  text-align: center;
  padding-top: 2rem;
}

.background {
  background-color: orange;
}

<div class="background">
  <div class="profile">
    <figure>
      <img class="profile-image" src="https://gamerheadquarters.com/hub/avatar/fallout76tshirt.jpg" alt="profile photo">
      <h1 class="profile-name">John Johnson</h1>
    </figure>
  </div>
</div>

score 2 · Answer 1 · answered Jul 18 '20 at 20:55

2

Browsers add some margin to the <body> element by default, which is what's causing that. You can remove it by adding this to your CSS code:

body {
  margin: 0;
}

answered Jul 18 '20 at 20:55

D. Pardal

6,173
1
17
37

score -3 · Answer 2 · edited Jul 18 '20 at 21:12

-3

You should always use margin:0 and padding:0, to all elements. You can use

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

This will prevent you from having predefined spaces in your code

edited Jul 18 '20 at 21:12

Jean-François Fabre

137,073
23
153
219

answered Jul 18 '20 at 21:02

Harsh Vishwakarma

49
4

How to eliminate whitespace around background color?

2 Answers2