この場合、marginがデフォルトで0にならないのはなぜですか？

Question

divを絶対配置してから、ul要素を内部に配置しました。 ulは、デフォルトでは0です。

* { 
 
    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>

私の質問は、なぜマージンがul要素ではない0のためですか？デフォルトのUIによって

Answer 1

マージンがご使用のブラウザで、デフォルトで定義され、それをリセットする必要がマージンとパディングを持っています。例えば

は、ここではWebKitのデフォルトのスタイリングです：Default webkit styling

あなたはそれを修正するために行うために必要なものを明示的0PXの値に余白を宣言することです。 this CSS snippetのようなものも、並べ替えたものすべてを手に入れるのに役立ちます。

Answer 2

は、あなたが指定しない限り

* { 
 
    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>