css区块中的空白

CSS中的空白有两种：margin和padding。它们对于网页的排版有很大的影响。

margin是指区块周围的空白。它可以让区块和其他元素之间产生间隔。例如：

/* 给p标签添加margin */
p {
   margin: 10px;
}

这样，每个p标签和周围的元素都会有10像素的距离。

padding则是指区块内部的空白。它可以让区块内部的文本或图像和边框之间产生间隔。例如：

/* 给p标签添加padding */
p {
   padding: 10px;
}

这样，每个p标签的内容和边框之间都会有10像素的距离。

需要注意的是，margin和padding会叠加。例如：

/* 给p标签添加margin和padding */
p {
  margin: 10px;
  padding: 10px;
}

这样，每个p标签和周围的元素都会有10像素的距离，每个p标签的内容和边框之间也会有10像素的距离。

我们可以使用Box-sizing属性来控制区块的盒模型是怎样的，它有两个值：content-Box和border-Box。

content-Box是默认值，表示盒模型中的宽和高只包括内容，不包括边框和填充。

border-Box则表示盒模型中的宽和高包括内容、边框和填充，但不包括外边距。

我们可以这样使用Box-sizing：

/* 设置所有元素的Box-sizing属性为border-Box */
* {
  Box-sizing: border-Box;
}

这样，我们在给元素设置宽度和高度时就可以更加精确。