CSS设置页面边距(的外边距和内填充)

一、CSS中的页面边距

CSS中的margin和padding属性可以用来设置页面边距。其中，margin指的是元素与周围元素之间的距离，而padding则是元素内部文本与边框之间的距离。

可以使用四个值来分别设置上、右、下、左四个方向的边距，如：

margin: 10px 20px 30px 40px;

这个属性指定了上边距为10px，右边距为20px，下边距为30px，左边距为40px。

当只需要设置一个值时，可以省略后三个值，如：

margin: 10px;

这个属性指定了四个方向的边距都为10px。

二、如何设置页面边距

设置页面边距的方式有多种，下面分别介绍：

1. 在CSS样式中设置页面边距

首先，在网页HTML中添加一个div标签，并给它设置一个class名称，如下：

<div class="margin-demo">设置页面边距</div>

然后，在CSS样式表中添加以下代码：

.margin-demo {
    margin: 20px; 
}

这个代码将会给div元素添加一个20px的边距。

2. 设置全局页面边距

如果想要设置全局页面边距，可以直接在body元素中添加margin属性来实现：

body {
    margin: 20px;
}

这个代码会将整个页面的边距都设为20px。

3. 响应式页面边距

对于响应式页面，可以使用CSS媒体查询来设置不同的边距：

@media screen and (max-width: 480px) {
    .margin-demo {
        margin: 10px;
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .margin-demo {
        margin: 20px;
    }
}
@media screen and (min-width: 769px) {
    .margin-demo {
        margin: 30px;
    }
}

三、总结

CSS的margin和padding属性可以用来设置页面边距，方式有多种：在CSS样式中设置、设置全局页面边距，以及响应式页面边距。对网页排版有很大的作用，既能增强网页的美观度，同时也能优化用户阅读体验。