宽度为父盒子50%的两个行内块元素为什么不能在同一行上显示

一个简单的案例，div 中包含两个 span ，span 设置为 inline-block ：

这是因为代码换行后，行内元素块之间会有间隙

margin-left: auto为什么可以使元素靠右

一个元素满足等式：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

containing block为包含块

什么是包含块

mdn (opens new window)的解释是

一个元素的尺寸和位置经常受其**包含块 (containing block)**的影响。大多数情况下，包含块就是这个元素最近的祖先块元素 (opens new window)的内容区 (opens new window)，但也不是总是这样。