一、边框border

1.1 基本写法

.box {
  border: 1px solid #333;
}

解释：

  • 1px：边框宽度
  • solid：实线（还有 dashed 虚线）
  • #333：颜色

1.2 单边设置

.box {
  border-top: 2px solid red;
}

1.3 圆角 border-radius

.box {
  border-radius: 12px;
}

1.4 示例说明

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为4.设置CSS边框.html

<!DOCTYPE html>
<html>
    <!--
    边框border组成部分：像素 样式 颜色
    像素:边框的粗细
    样式:
        solid-实线
        dashed-虚线,线段
        dotted-虚线,圆点
        double-双层
    颜色:边框的颜色
    -->
    <div style="height: 200px;width: 50%;border: 5px solid black; ">
        <!-- 这里编写边框的内容 -->
        边框
    </div>
</html>

2、双击【4.设置CSS边框.html】

image-20250519193454226

二、内边距padding

padding：内容到边框之间的距离（盒子“内部留白”）

.box {
  padding: 20px;
}

四个方向写法：

.box {
  padding: 10px 20px 30px 40px; /* 上 右 下 左 */
}

常用简写：

  • padding: 10px 20px; → 上下10，左右20
  • padding: 10px 20px 30px; → 上10，左右20，下30

三、外边距margin

margin：元素与元素之间的距离（盒子“外部间距”）

.box {
  margin: 20px;
}

3.1 水平居中（超常用）

.box {
  width: 300px;
  margin: 0 auto;
}

3.2 外边距塌陷

当两个上下元素都有 margin 时，可能只会取更大的那个值（不是相加）。比如：

.a { margin-bottom: 30px; }
.b { margin-top: 20px; }

实际间距可能是 30px（取大者），这就是“塌陷”现象之一。

3.3 示例说明

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3.设置CSS内外边距.html

<!DOCTYPE html>
<html>
    <!-- 通过margin字段设置CSS内边距 -->
    <!-- 方式1：margin: 10px 10px 10px 10px; 表示上右下左都为10px -->
    <!-- 方式2：margin: 50px; 表示上右下左都为50px -->
    <!-- 方式3：margin: 50px 20px; 表示上下为50px,左右为20px -->
    <!-- 方式4：margin: 10px 50px 10px; 表示上为10px,左右为50px,下为10px -->

    <!-- 通过padding字段设置CSS内边距 -->
    <!-- 方式1：padding: 10px 10px 10px 10px; 表示上右下左都为10px -->
    <!-- 方式2：padding: 50px; 表示上右下左都为50px -->
    <!-- 方式3：padding: 50px 20px; 表示上下为50px,左右为20px -->
    <!-- 方式4：padding: 10px 50px 10px; 表示上为10px,左右为50px,下为10px -->
    <div style="background-color: blueviolet;width: 50%;margin: 10px auto;padding: 10px;">
        <p style="text-align: left;">演示显示在左侧</p>
        <p style="text-align: right;">显示在右侧</p>
        <p style="text-align: center;">显示在中间</p>
    </div>
</html>

2、双击【3.设置CSS内外边距.html】

image-20250519132049107