盒模型计算问题

Question

本来以为自己搞懂了结果应用时候又蒙圈

Answer 1

用 Firefox 很容易就发现了原因：

经典问题了，很多方式解决：

1. 字体大小设 0
2. flex 布局
3. 改 html，移除空白
4. 未来的 text-space-collapse

Answer 2

父是margin:0 auto, 子的宽度是182*4 小于父的宽度，水平居中有什么问题？不就是这样的吗

Answer 3

.intro {
    display: inline-block;
}

行内块元素横向排列时是存在默认间距的，所以不是盒模型你没理解，而是对于元素种类理解不到位可能，
可考虑使用flex/float布局

希望帮得到你~