loading...

Why are HTML elements 8px ahead of their given location?

calin92540842 profile image PDS OWNER CALIN (Calin Baenen) ・1 min read

So, I noticed an odd behavior within HTML that if I have an element with the CSS:

.class1 {
    position:absolute;
    top:0px;
    left:0px;
}

or the CSS:

.class2 {
    position:inline-block;
    margin-top:0px;
    margin-left:0px;
}

the element is always 8 pixels ahead in the positive direction, so if I want it touching the corners, I have to end up saying:

{
    top:-8px;
    left:-8px;
}

I've tried with numbers before -8, but it seems to be (roughly, and as a rounded int) -8, so why are elements always 8 pixels ahead?

Thanks for reading!
Cheers!

Discussion

markdown guide
 

Hey, Calin, how are you?

That happens because the browsers already have some computed CSS styles. By default, the margin property (top, right, left and bottom) has a value of 8px.

To remove it, just use the following code in your stylesheet:

html,
body {
  margin: 0;
}
 

Ok, but why is it like this by default? Why 8 pixels specifically? If you know anymore about why the computed CSS has the values it does, please let me know, I'm really interested to learn this to help ripen my dev career possibility %!
Cheers!