HTML5布局中元素紧贴边缘或堆叠是因未合理设置margin或padding；可通过五种方法实现留白：一、用margin控制外部间距；二、用padding控制内部空白；三、组合二者实现复合效果；四、利用空白字符与换行符辅助文本级留白；五、使用CSS逻辑属性适配多方向布局。
如果您在使用 HTML5 进行页面布局时发现元素紧贴边缘或彼此堆叠，缺乏视觉呼吸感，则可能是由于未合理设置外边距（margin）或内边距（padding）。以下是实现留白的多种具体方法：
一、使用 margin 控制元素外部间距
margin 属性用于在元素边界之外创建透明空间，影响该元素与其他相邻元素之间的距离，适用于分离块级元素或居中布局。
1、在 CSS 中为需要留白的元素添加 margin 属性，例如：margin: 20px;
2、若仅需上下留白，可写为：margin: 30px 0;
立即学习“前端免费学习笔记（深入）”；
3、若需单独控制右侧留白，可写为：margin-right: 16px;
4、对块级元素实现水平居中，可设：margin: 0 auto; 并确保该元素有明确宽度。
二、使用 padding 控制元素内部空白
padding 属性在元素内容区与边框之间添加空白，不影响其他元素位置，常用于按钮、卡片等容器内部留白。
1、为段落元素添加统一内边距：padding: 12px;
2、若需上、右、下、左分别设定，可写为：padding: 8px 16px 12px 20px;
3、为按钮增加内边距以提升点击区域和视觉舒适度：padding: 10px 24px;
4、配合 box-sizing: border-box 使用，使 padding 值不额外增加元素总宽度。
三、结合 margin 和 padding 实现复合留白效果
单一使用 margin 或 padding 往往难以满足复杂布局需求，通过组合二者可精确控制内外空间关系，避免塌陷或重叠。
1、为卡片容器设置外边距分离相邻卡片：margin-bottom: 24px;
2、同时为其内部标题添加上内边距：padding-top: 16px;
3、对表单输入框统一设置：margin: 8px 0; padding: 12px;
4、当父容器启用 display: flex 时，可对子元素使用 margin 调整间隔，如：margin-right: 16px; 最后一项用 :last-child 排除。
四、利用空白字符与换行符辅助留白
HTML5 默认会合并多个连续空白字符（空格、制表符、换行），但可通过特定方式保留有意义的空白结构，适用于文本级微调。
1、在文本中插入不间断空格实体： 替代普通空格。
2、对预格式化文本使用
标签，保留原始缩进与换行，但需注意语义合理性。 <p>3、在 inline 元素间添加换行+缩进，浏览器仍会将其视为空格，可作为轻量留白手段。</p> <p>4、避免滥用 替代 margin/padding，因其不具备响应性且破坏语义结构。</p> <h2>五、使用 CSS 逻辑属性适配多方向布局留白</h2> <p>逻辑属性（如 margin-inline-start、padding-block-end）根据书写模式自动映射物理方向，适用于 RTL 或垂直排版场景下的留白控制。</p> <p>1、为支持从右向左阅读的文本设置起始外边距：<strong><font color="green">margin-inline-start: 16px;</font></strong></p> <p>2、在垂直书写模式下控制块方向末尾内边距：<strong><font color="green">padding-block-end: 12px;</font></strong></p> <p>3、使用 margin-inline 替代 margin-left/margin-right，使样式自动适配方向：<strong><font color="green">margin-inline: 0 20px;</font></strong></p> <p>4、检查浏览器兼容性，Chrome 87+、Firefox 63+、Safari 14.1+ 支持完整逻辑属性体系。</p>
