子元素margin会让父元素“被撑开”是因margin塌陷：子元素垂直外边距与父元素边界合并；触发BFC（如display:flow-root）可彻底解决，语义清晰且无副作用。

flex容器需设width:100%或max-width:100%才能响应小屏，否则子元素flex:1无效；须配合box-sizing:border-box、慎用min-width、显式声明flex-direction，嵌套层级越多越需逐层约束宽度。

通过设置line-height:1可有效压缩或元素内文本上下留白，使字体视觉高度紧贴实际字形边界，解决标题与上下边框间距过大的问题。

不同浏览器body默认margin不同是因用户代理样式表差异；推荐轻量重置：重置盒模型、块级元素外边距和替换元素显示，保留表单控件默认样式，并防御性设置htmlfont-size。

Grid容器遵循标准盒模型，但子项尺寸由网格轨道和对齐属性共同决定，而非自身width/height；fr单位分配剩余空间，子项stretch时width被忽略，需用align-self:start等显式控制。

本文解释为何对默认inline的元素设置padding-bottom无效，并说明通过display:block或display:inline-block激活盒模型属性（如padding/margin）的原理与实践方法。