滚动区内消失的右边距

观察这个页面，在可滚动区域内部，为 .content 元素定义的右边距消失了。

StackOverflow 上有关于这个现象的详细解释，简单来讲这就是 CSS 这么要求的。

但是回过来想一想 CSS 为什么这么要求？这还要从边距和滚动条的意义说起。__边距__，顾名思义，就是定义本元素与四周元素的距离的，在元素排列的方向上（一般是ltr），如果后面没有元素，那么边距也就没有意义了。__滚动条__，其目的是提供一种能显示后代元素完整内容的方式，既然是内容，那么其右侧边距的渲染便没有了意义。以上两个概念综合到一起，当子元素内容大于父元素激活滚动条时，右侧的边距便被当做0处理。在 rtl 的排列中，相应的，是左边距。

其实，如果给容器 .container 定义内边距，会发现其右侧内边距也会“消失”，这与 .content 的右外边距“消失”是一个道理。

这个现象会直接影响容器 .container 的 scrollWidth 属性以及滚动条最大滚动量。

另外先入为主应当显示右边距的想法应该是与 iframe 混淆了。iframe中的页面元素可以有外边距，这属于另一个文档（document）了，与本文情形不同。