可通过五种CSS方法调整HTML页边距与留白：一、body margin全局设置；二、body padding配背景色；三、重置默认值后容器内设padding；四、viewport+rem响应式控制；五、CSS变量统一管理。
如果您希望调整HTML页面的页边距与留白，使内容区域与浏览器窗口边缘保持一定距离，则需通过CSS控制body元素或容器元素的外边距（margin）与内边距（padding）。以下是几种常用且互不依赖的实现方法：
一、使用body元素的margin属性设置整体页边距
该方法直接作用于整个HTML文档的根内容容器，通过为body标签设置margin值，可在页面四周边缘创建统一空白区域。此方式简洁、全局生效，适用于基础布局需求。
1、在HTML文件的<head>部分添加<style>标签。
2、在<style>标签内写入：body { margin: 20px; }。
立即学习“前端免费学习笔记（深入）”；
3、保存HTML文件并在浏览器中刷新查看效果，此时页面四周将呈现20像素宽的白色留白。
二、使用body元素的padding属性配合背景色区分留白区域
该方法将留白表现为body背景延伸出的内容区外围空间，适用于需要为页边留白单独设定背景色或边框的场景。padding不会压缩内容宽度，但会扩大body的渲染尺寸。
1、在<style>标签中定义：body { padding: 30px; background-color: #f8f9fa; }。
2、确保body内嵌套一个具有明确宽度限制的容器（如div），避免内容随padding无限撑开。
3、刷新页面后，可见内容区域被向内收缩30像素，外围呈现浅灰背景留白。
三、通过CSS重置默认margin并自定义容器内边距
不同浏览器对body元素存在默认外边距（如Chrome默认8px），可能干扰精确留白控制。先清除默认值，再为内部容器设置padding，可实现更稳定、可预测的留白效果。
1、在<style>中添加：* { margin: 0; padding: 0; box-sizing: border-box; }。
2、创建一个class为“wrapper”的div，置于<body>内，并设置：.wrapper { padding: 24px; max-width: 1200px; margin: 0 auto; }。
3、将所有正文内容放入该div中。
4、此时页面呈现的效果是：无浏览器默认边距干扰，内容区域四周严格保持24像素内边距。
四、使用viewport meta标签配合rem单位实现响应式页边距
该方法适配移动设备视口，在不同屏幕宽度下维持相对一致的视觉留白比例。利用rem单位结合根字体大小动态调整，避免固定像素在小屏上过宽或大屏上过窄。
1、在<head>中添加meta标签：<meta name="viewport" content="width=device-width, initial-scale=1">。
2、在<style>中设置：html { font-size: 16px; } @media (max-width: 768px) { html { font-size: 14px; } } body { margin: 1.5rem; }。
3、保存并测试不同设备宽度下的显示效果，可见页边距随屏幕缩小而按比例缩减至约21像素（1.5 × 14）。
五、利用CSS自定义属性（CSS变量）集中管理留白数值
该方法提升样式可维护性，将页边距数值抽离为变量，便于后续统一修改。适用于中大型项目或需多处复用相同留白规则的场景。
1、在<style>中定义：:root { --page-margin: 28px; }。
2、为body设置：body { margin: var(--page-margin); }。
3、如需为特定区块设置不同留白，可另设变量：.section { padding: var(--page-margin); }。
4、修改:root中的--page-margin值后，所有引用该变量的位置将同步更新，当前生效值为28像素页边距。
