Why is margin default not 0 in this case? - html

Question

I have a div positioned absolutely and then a ul element inside it. For some ul is not taking margin: 0 as default.
* {
box-sizing: padding-box;
display: block;
}
.userinfo {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
cursor: default;
}
.userinfo .sprite {
position: absolute;
width: 50px;
height: 35px;
right: 21px;
bottom: 8px;
border: 1px solid red;
}
.userinfo .sprite ul {
position: absolute;
width: 42px;
height: 15px;
left: 0;
top: 0;
border: 1px solid red;
}
.userinfo .sprite ul .themes {
position: absolute;
width: 13px;
height: 14px;
left: 0;
top: 0;
background: url("http://www.w3schools.com/css/img_navsprites.gif") -23px 0;
cursor: pointer;
border: 1px solid red;
overflow: hidden;
}
.userinfo .sprite ul .user_lang {
position: absolute;
width: 20px;
height: 12px;
right: 0;
top: 0;
background: url("http://www.w3schools.com/css/img_navsprites.gif") -23px 0;
cursor: pointer;
border: 1px solid red;
overflow: hidden;
}
<a class="userinfo" href="#">
<div class="sprite">
<ul>
<li class="themes"></li>
<li class="user_lang"></li>
</ul>
</div>
</a>
My question is, why is margin for ul element not 0?

Answer 1

Margins are defined by default, unless specified, by your browser.
For example here is the webkit default styling: Default webkit styling
What you need to do in order to fix that is to explicitly declare the margins to a value of 0px.
Also something like this CSS snippet might help you getting all that sorted.

Answer 2

By default Ul has margin and padding you need to reset it
* {
box-sizing: padding-box;
display: block;
}
.userinfo {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
cursor: default;
}
.userinfo .sprite {
position: absolute;
width: 50px;
height: 35px;
right: 21px;
bottom: 8px;
border: 1px solid red;
}
.userinfo .sprite ul {
position: absolute;
width: 42px;
height: 15px;
left: 0;
top: 0;
margin: 0;
padding: 0;
border: 1px solid red;
}
.userinfo .sprite ul .themes {
position: absolute;
width: 13px;
height: 14px;
left: 0;
top: 0;
background: url("http://www.w3schools.com/css/img_navsprites.gif") -23px 0;
cursor: pointer;
border: 1px solid red;
overflow: hidden;
}
.userinfo .sprite ul .user_lang {
position: absolute;
width: 20px;
height: 12px;
right: 0;
top: 0;
background: url("http://www.w3schools.com/css/img_navsprites.gif") -23px 0;
cursor: pointer;
border: 1px solid red;
overflow: hidden;
}
<a class="userinfo" href="#">
<div class="sprite">
<ul>
<li class="themes"></li>
<li class="user_lang"></li>
</ul>
</div>
</a>