Solution 1 :

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;
}

Solution 2 :

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

Problem :

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>

Comments

Comment posted by do─čukan

body {margin:0;}

By

Leave a Reply

Your email address will not be published. Required fields are marked *