Bu durumda marj varsayılanı 0 değil neden?

Question

Tam olarak bir div yerleştirdim ve bunun içinde bir ul öğesi var. Bazı ul için kenar boşluğu değil: 0 varsayılan olarak.

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

Sorum neden olduğu ul elemanı değil 0 marj? Varsayılan Ul tarafından

Answer 1

Kenar boşlukları tarayıcınız tarafından, varsayılan olarak tanımlanır bunu sıfırlamak için gereken marjı ve dolgu maddesi sunuyor. Default webkit styling

Ne düzeltmek için yapmanız gereken açıkça 0px değerine marjlarını beyan etmektir: Örneğin

burada webkit varsayılan stil olduğunu. Ayrıca, this CSS snippet gibi bir şey, sıralananları almanıza yardımcı olabilir.

Answer 2

belirttiğiniz sürece

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