为什么在这种情况下保证金默认不为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？

Answer 1

默认情况下，您的浏览器会定义边距，除非另有指定。

例如，这里是webkit默认样式：Default webkit styling

为了解决这个问题，您需要做的是将边距明确地声明为0px的值。 像this CSS snippet这样的东西也可以帮助你完成所有排序。

Answer 2

默认情况下，UI需要重置边距和填充

＆＃13;

＆＃13;

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

＆＃13;

<a class="userinfo" href="#">


  <div class="sprite">
    <ul>
      <li class="themes"></li>
      <li class="user_lang"></li>
    </ul>
  </div>

</a>

＆＃13;

＆＃13;

＆＃13;