CSS边距(margin)异常咨询：为何部分边距无法正常显示？

场景1：block布局下右下边距消失的原因 #

• 当html和body设为display:block且height:100%时，它们的高度等于当前视口高度，宽度默认撑满视口。
• main元素设置width:100%、height:100%，意味着它的宽高会继承body的尺寸（也就是视口大小），再加上margin:24px后，main的实际占据空间是视口宽+48px（左右margin）、视口高+48px（上下margin）。
• 由于body默认overflow:visible，超出视口的部分会被裁切（或需要滚动才能看到）。顶部和左侧的margin会把main往右下方向推，所以能看到这两处的空白；而右侧和底部的margin因为超出了视口范围，不滚动的话就看不到。

场景2：flex布局下底部边距仍不可见的原因 #

• 把html和body改成display:flex后，body变成了flex容器，默认横向排列，且flex容器会默认处理子元素的横向溢出：当子元素宽度超出容器时，会自动出现横向滚动条，所以main右侧的margin能随着滚动被看到，也就是所谓的“恢复可见”。
• 但纵向（高度）上，flex容器body设置了height:100%，main的height:100%会被flex布局的align-items:stretch特性拉伸到容器的高度，再加上margin-bottom:24px，main的总高度会超过视口高度。而flex容器默认纵向没有强制滚动的逻辑，超出视口的底部margin会被隐藏在视口外，不滚动纵向滚动条的话就看不到。

内容的提问来源于stack exchange，提问作者Rishit Chaudhary