css盒子模型内边距

CSS盒子模型描述了HTML元素如何在网页上占据空间和布局的过程。它由四个部分组成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。内边距（padding）是指内容区域与边框之间的空白区域，可以增加元素与周围其他元素的距离，不会影响元素的实际宽度或高度，而是会增加总空间。

设置内边距的方式有多种，例如：

.box {
  padding: 10px;   /* 全局内边距，所有方向都是10像素 */
  padding-top: 20px;  /* 单独指定顶部内边距 */
  padding-right: 30px; /* 右侧内边距 */
  padding-bottom: 40px;  /* 底部内边距 */
  padding-left: 50px;  /* 左侧内边距 */
}

注意，如果只设置了`padding`而没有明确指定方向，则默认所有方向都应用相同的值。此外，内边距不影响元素的实际宽度和高度，除非设置了`box-sizing: border-box;`，在这种模式下，计算盒模型时包括了内边距和边框的空间。