与“margin”相关的TAG标签

flex-wrap:wrap能解决换行问题，但需配合flex-direction:row和容器明确宽度；常见不换行原因是父容器无宽度限制、子项white-space:nowrap或内容不可折行。

用canvas实现图片动态裁剪的核心逻辑是：先通过getBoundingClientRect()获取canvas真实坐标，再将鼠标/触摸点映射到原始像素坐标，最后用drawImage在新canvas中按原始尺寸精确抠图。

默认content-box导致布局“多出几像素”是因为width仅指内容区，padding和border额外增加尺寸；border-box将width/height定义为盒子总尺寸，padding和border向内压缩内容区，实现所见即所得。

::first-line仅对块级容器中首行文本生效，失效主因是元素非块级、父容器破坏文本流、首行无文本或样式属性不被支持。

SVG的不支持HTML内容（如），也无法嵌套；需改用原生SVG元素分段控制样式与位置，配合Unicode符号或字体特性实现类HTML效果。

HTML5可视化编辑器中组件间距本质是修改CSS的margin/padding属性；调整无效多因优先级冲突或inline元素限制；推荐用flex+gap替代手动margin，移动端宜用rem/vw并检查响应式配置。

box-shadow不占用布局空间，纯属视觉修饰，不影响元素尺寸、文档流位置及相邻元素；其被overflow:hidden裁剪是因绘制区域超出而非占位；需手动用margin等预留空间。

用vh实现全屏布局高度不对，根本原因是vh按视口高度计算，而移动端地址栏动态缩放导致100vh不等于真正可见全高；推荐优先用min-height:100vh，或升级为兼容性更好的100dvh并提供vh降级。

:hover伪类需配合可交互元素使用，现代浏览器虽支持div:hover但语义差；必须显式声明transition才生效，且应写在默认状态中，优先使用transform和opacity等高性能属性。

用FontAwesomeCDN（v6+）引入社交图标最便捷，需用fab类和正确图标名，添加aria-label和rel="noopenernoreferrer"保障可访问性与安全，配合flex布局和缩放类优化显示。