[分享]css中 盒模型属性包括

盒模型是CSS中一个重要概念，盒模型属性包括内容（content）、填充（padding）、边框（border）和边距（margin），可以在CSS中进行设置。下面我们逐个来了解这几个属性。.box ...

盒模型是CSS中一个重要概念，盒模型属性包括内容（content）、填充（padding）、边框（border）和边距（margin），可以在CSS中进行设置。下面我们逐个来了解这几个属性。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid #000;
  margin: 10px;
} 

内容（content）

内容就是元素的实际内容，包括文字、图片等，由width和height属性设置。例如上述代码中，.box的宽度为200px，高度为100px。

填充（padding）

填充是内容与边框之间的距离，可以通过padding属性进行设置。上述代码中，.box的填充为20px，即内容与边框之间有20px的距离。

边框（border）

边框是包裹在内容和填充外部的线条，可以通过border属性进行设置。上述代码中，.box的边框为1px粗的黑色实线。

边距（margin）

边距是元素与元素之间的距离，可以通过margin属性进行设置。上述代码中，.box与其他元素之间的距离为10px。

总的来说，盒模型属性是CSS中一个非常基础的概念，掌握后可以更好地进行布局和排版。