html - 为什么 UL 比 DIV 宽，即使两者都设置为相同的宽度？

Question

HTML代码:

<div>Foo</div>
<ul>
    <li>Bar</li>
</ul>

CSS:

div {
    width: 50%;
    border: 1px solid blue;
}

ul {
    width: 50%;
    border: 1px solid green;
}

JSFiddle

两个问题:

1. 为什么 ul 比 div 宽，尽管它们都设置为相同的宽度？
2. 如何固定此代码，使 ul 和 div 具有相同的宽度？

Answer 1

因为你需要知道默认框模型是如何工作的。默认情况下，padding、border 空间被认为在元素之外，因此它们加起来等于您的总元素 width。

^{图片来源:w3c Box model#Box Dimensions}

如果你有一个元素，宽度为 100px，边框为 2px，边距为 20px，那么你的总元素大小将为 100 + 4px(每边 2px)+ 40px(20px 的边距每边)，总宽度为 144 像素。

---

如何解决这个问题？

要么你需要像这样改变你的盒子模型，

* {
  box-sizing: border-box;
}

这个东西要做的是，通过将 border-box 设置为 box-model 值，它将计算 padding 和 border 在元素内部而不是外部。所以你的元素的总 width 保持不变。

Note that * will modify the box-model for all the elements, so you can also use ul or a class name if you want to alter the box model for specific elements only.

Demo

---

或者你需要重置默认的 ^{Refer #1(end of my answer)} padding ul 元素

ul {
  padding-left: 0;
}

Demo (注意子弹已经不在了，所以...)

使用 margin 微调 li

ul li {
  margin-left: 20px;
}

Demo

或者您可以在 ul 元素上使用 list-style-position: inside;。

Demo

Note: Using list-style-position does have a down side if you have multiple lines, which will result in line wrapping below your bullet point so go ahead with margin-left, too many things I can cover here but don't want to deviate from my actual answer.

---

#1 padding 从哪里来？

每个浏览器都有自己的默认样式表，我们也称之为用户代理样式表。当网页没有定义其他样式时应用此样式表。所以每个浏览器都有自己的样式并且可能会有所不同，因此我们使用 reset.css 或 normalize.css 或一个方便的星号声明来重置样式，例如

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box; /* alters box model */
}