CSS|盒子模型-CSDN博客

本文链接：https://blog.csdn.net/qq_45985728/article/details/119258784

CSS|盒子模型

1.什么是盒子模型

我们随便打开一个网页检查元素：

在这里插入图片描述

可以看到图中右上角，有颜色部分就是一个盒子模型，包括：

Margin，外边距，就是盒子本题和外部元素的距离，是透明的（类似于行间距）
Border，边框，就是盒子的边框，围绕着盒子
Padding，内边距，清除内容周围的区域，就是实际上的内容和边框直接的距离
Content，盒子的内容，显示文本等信息

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
  <style>
    div{
      width: 300px;
      margin: 20px;
      padding: 20px;
      border: blue 10px solid;
      background-image: radial-gradient(yellow,green);
    }
  </style>
</head>
<body>

<div>
  这个盒子的内容用来讲解该盒子的属性：
  <br>
  盒子宽度为300px
  <br>
  外边距为20px，内边距为20px
  <br>
  边框为10px，蓝色，实线
  <br>
  背景颜色为黄绿径向渐变
</div>

</body>
</html>