对盒子来说，垂直扩展以适应包含的内容是很自然的。值得奇怪的是，不仅仅是不同平台下的文本表现不同，不同的浏览器处理这个问题时，也有很多怪癖。
无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度，直到其父元素的宽度（其父元素不必是相对定位的）。由于这些无宽度盒子的脆弱性，我们要学到的是关键任务模式的时候它们是不能依赖的，像总体页面布局中。如果浮动一列作为侧边栏使用，并指望那些内部元素（如图片）来负责包含它的宽度，你就是在自找麻烦。
内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子，但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形，它们也可以像其它盒子一样有 margin, padding he border
折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边，但是只在第一行有效，因为那是盒子的起点。padding 正常的应用在文本的上部或下部，当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗？试着把这行代码暂时放入样式表：
* {
border: 1px solid red !important;
}
