對inline-block元素作用負margin為什麼其移動範圍會受到限制？

01-14

JS Bin - Collaborative JavaScript Debugging 如demo所示，為什麼對inline-block作用margin-top其移動範圍會受到限制，應該如何理解負margin的行為？

瀉藥

還能放更高的

原始位置

更高的位置

其實只是

&Demo2 inline-block元素負margin&

&style="line-height:1px;"&>

如果不是瀏覽器最小字型大小限制

理論上紅塊是底部是可以貼到其容器頂部的

實際上你我都清楚 inline-block 也是 inline box 的一種

都屬於 IFC 布局規範

不管 margin 正負

屬於 IFC 布局的塊

是不能衝出這個 IFC 的包含塊的

為什麼看起來可以出去一部分

是因為

它的 baseline 在底部

它是 div . container 內個第一行 line box 的組成部分

所以它必須要跟第一行 line box 內的其他行內塊 baseline 對齊

然後生成整體的 line box 高度

這裡它前後都有匿名行內塊（換行空格等）

它的整個布局高度參與 line box 高度計算

負 margin 時，導致渲染高度有

但實際布局高度小了

有一部分渲染到容器外

但是實際布局計算部分還在塊內

後面的規則的確複雜但是簡單來說就是

當inline-block元素與block元素重疊時，inline-block元素覆蓋block元素的背景，但無法覆蓋其內容

你可以觀察例子下面的.inner碰到h2的文字就停止了到此為止