css中的内容与边框的距离

CSS中的内容与边框距离指的是在盒模型中，内容区与边框之间的距离。在CSS中，可以通过设置padding属性来调整内容与边框的距离。

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 20px;
} 

在上述代码中，.box为一个盒子元素，其宽度为200px，高度为100px，边框为1px的实线黑色边框。padding属性设置为20px，则表示内容区与边框之间的距离为20px。

需要注意的是，padding属性可以分别设置上下左右四个方向的值，也可以只设置部分方向的值。例如：

.box {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 5px;
  padding-right: 15px;
} 

上述代码中，padding-top表示距离上边框的距离为10px，padding-bottom表示距离下边框的距离为20px，padding-left表示距离左边框的距离为5px，padding-right表示距离右边框的距离为15px。

此外，还可以利用padding的百分比值来设置内容与边框的距离。例如：

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 5%;
  padding-right: 15%;
} 

上述代码中，padding-top和padding-bottom的值为10%，表示内容区在垂直方向上距离边框的距离均为盒子高度的10%。padding-left的值为5%，表示内容区在水平方向上距离边框的距离为盒子宽度的5%。padding-right的值为15%，表示内容区在水平方向上距离边框的距离为盒子宽度的15%。

总之，在CSS中，通过padding属性来设置内容与边框的距离是十分重要的。适当的调整内容与边框的距离，可以使页面展示效果更佳，也更符合设计师的要求。