日常补坑记录之width:auto/inherit/100%

今天在做富文本的一个功能“两端间距”时，需要选择预先设置好的几个值，那么就需要一个展示的列表，由于其它的几个功能也有类似的展示，所以打算抽成一个公共的去做。

在这里，遇到了一个问题，就是外层div固定“width:150px;padding:5px”；接着坑来了，内部div设置了“width:inherit;”，这时候内部div的宽度就是150px，毕竟继承。那么外层的padding发挥什么作用呢，就是把内部div的一部分给挤出去了，毕竟继承。如图一所示。

那么如果解决呢，我们不采用继承inherit，而采用auto或者100%，这两个呢就是将宽度撑到外层div的边边（这里指内部的边边哈，也许这么解释不太清楚，谅解下），那么这个时候呢，内部div的实际宽度其实就是140px了（当然我们这里不算完整的盒子模型的）。如图二所示。