Chrome和Firefox中的高度呈現方式不同我發現如果我們設置一個塊級別元素，有height:auto或height: 0~100%沒有設置父級的高度具有顯式值，并且其塊級別子級具有底部邊距，那么它將在Chrome中以不同方式計算高度，但在Firefox中則不同。對于設置的情況height: 1%：http://codepen.io/anon/pen/BjgKMRhtml {   background: pink;}body {   background: yellow;}div {   height: 1%;}inner {   margin-bottom: 30px;   margin-top: 20px;}<div>   <p class="inner">block level element</p></div>div塊的高度將計算為margin-bottom + content height of p element。我很困惑為什么height: 1%應該計算，auto因為父元素（html和body標簽）沒有明確設置其高度，但具有不同的高度，因為我們只是直接將高度設置為auto？如果我們直接將其設置為height: auto，則顯然只需將高度設置為子塊級元素的高度，該高度不包括其下邊距。html {   background: pink;}body {   background: yellow;}div {   height: auto;}inner {   margin-bottom: 30px;   margin-top: 20px;}<div><p class="inner">block level element</p></div>我已經閱讀了CSS 2.1規范，并考慮我的問題可能包含高度屬性和邊緣折疊主題，但仍然無法理解為什么它在Chrome ver中表現不同。47.0.2526，雖然Firefox版本。44.0.2將顯示具有相同值的高度。列出的參考文獻：https：//www.w3.org/TR/CSS2/visudet.html#the-height-property10.5：百分比...如果未明確指定包含塊的高度（即，它取決于內容高度），并且此元素未完全定位，則值將計算為“auto”。...10.6.3：overflow計算時正常流程中的塊級非替換元素visible。...如果'height'是'auto'，則高度取決于元素是否具有任何塊級子元素以及它是否具有填充或邊框：元素的高度是從其頂部內容邊緣到下面第一個適用的距離：如果框使用一行或多行建立內聯格式化上下文，則為最后一個行框的下邊緣如果孩子的下邊距沒有因元素的下邊距而崩潰，則其最后一個流入子項的底部（可能是折疊）邊緣的下邊緣最后一個流入子項的下邊界邊緣，其上邊距不會隨元素的下邊距折疊零，否則https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#collapsing-margins8.3.1折疊邊距。如果元素沒有頂部邊框，沒有頂部填充，并且子節點沒有間隙，則插入塊元素的上邊距將與其第一個流入塊級子節點的上邊距折疊。如果盒子沒有底部填充，則“高度”為“auto”且“min-height”為零的流入塊盒的底部邊緣將與其最后一個流入塊級子的底部邊緣折疊底部邊框和孩子的下邊距不會因具有間隙的上邊距而崩潰。...如果框的頂部和底部邊距相鄰，則邊距可能會通過它折疊。在這種情況下，元素的位置取決于其與邊緣正在折疊的其他元素的關系。如果元素的邊距與其父元素的上邊距折疊，則框的上邊框邊緣定義為與父元素相同。否則，元素的父元素不參與邊距折疊，或僅涉及父元素的下邊距。元素頂部邊框邊緣的位置與元素具有非零底邊框時的位置相同。