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