入门 CSS 统一边距

在网页设计中，统一边距是一个非常重要的概念，可以让网页看起来更加整洁和美观。本文将介绍如何使用 CSS 实现统一边距。

1. 设置默认值

首先，我们需要设置默认的 margin 和 padding 值。margin 和 padding 分别指元素的外边距和内边距。

* {
  margin: 0;
  padding: 0;
}

这段 CSS 代码会将所有元素的 margin 和 padding 设置为 0。注意，这里的 * 是通配符，代表所有元素。

2. 统一边距

接下来，我们可以为不同的元素设置统一的边距。

2.1 文本

body {
  font-size: 16px;
  line-height: 1.5;
  padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0;
}

p {
  margin-bottom: 20px;
}

ul, ol {
  margin-bottom: 20px;
  padding-left: 40px;
}

li {
  margin-bottom: 10px;
}

这段 CSS 代码会为网页中的不同元素设置不同的 margin 和 padding 值，以达到统一边距的效果。其中，h1 到 h6 标题的 margin 为 20px 0，p 段落的 margin-bottom 为 20px，ul 和 ol 列表的 margin-bottom 为 20px，li 列表项的 margin-bottom 为 10px。

2.2 图片和视频

img, video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

这段 CSS 代码会为网页中的图片和视频设置一些基本样式，包括最大宽度为 100%、高度自适应、块级元素和居中对齐。同时还将它们的 margin 设置为 20px auto，使其与其他元素的边距保持一致。

结语

通过上述方法，我们可以轻松地实现网页中的统一边距效果，让网页看起来更加整洁和美观。不过，在实际项目中，还需根据需求进行灵活调整。