CSS盒模型定位中outer margin、inner border术语含义咨询

这两个术语里的outer、inner没有特殊引申义，和CSS Box Model Module Level 3定义的盒模型外边缘、内边缘概念完全对应，本质是相对于盒内容中心的方向描述：

• 对盒模型的任意一层（margin、border、padding、content）来说，outer edge指该层远离内容中心的外侧边界，inner edge指该层靠近内容中心的内侧边界。

两个术语的具体定义 #

• outer margin边缘：对应margin层的外边缘，也就是margin区域离元素内容最远的那条边线，是整个元素盒的最外侧边界，也就是元素在布局中占据空间的最外沿。
• inner border边缘：对应border层的内边缘，也就是border区域离元素内容最近、紧挨着padding区域的那条边线，再往内就是元素的padding内边距区域。

对应盒模型示意图的位置 #

你提供的标准CSS盒模型示意图从外到内依次为margin层、border层、padding层、content层：

• 整个示意图最外围、圈住margin区域的最外侧边线，就是outer margin边缘
• 作为border层和padding层分界线、圈住padding区域的那条边线，就是inner border边缘

这个定义可以和你看到的两处规则互相印证：

1. 对absolute/fixed定位元素，top属性定义的是元素自身上侧margin外边缘，到包含块上侧border内边缘的距离——和实际开发表现完全一致：给元素设top: 0时，元素会带着自身margin顶到包含块的border内侧，不会覆盖包含块的border区域。
2. 滚动条槽位于inner border edge和outer padding edge之间——padding层的外边缘本身就是padding远离内容、挨着border内侧的边线，和border的内边缘位置相邻，浏览器预留的滚动条空间刚好就在这个位置，不会占用元素的content内容区域。

内容的提问来源于stack exchange，提问作者Cristiano Moraes