分清padding,margin,border的用法

在CSS中，padding、margin和border是常用的布局属性，用于控制元素在页面中的位置和外观。

• padding 表示元素内部内容与边框之间的距离。可以使用padding-top、padding-right、padding-bottom和padding-left来分别设置上、右、下、左四个方向的内边距。例如：

  div {
    padding: 10px; /* 上下左右内边距均为10px */
    padding-top: 5px; /* 上边内边距为5px */
    padding-left: 20px; /* 左边内边距为20px */
  }
  

• margin 表示元素与相邻元素之间的距离。可以使用margin-top、margin-right、margin-bottom和margin-left来分别设置上、右、下、左四个方向的外边距。例如：

  div {
    margin: 10px; /* 上下左右外边距均为10px */
    margin-top: 5px; /* 上边外边距为5px */
    margin-left: 20px; /* 左边外边距为20px */
  }
  

• border 表示元素的边框。可以使用border-width、border-style和border-color来分别设置边框的宽度、样式和颜色。例如：

  div {
    border: 1px solid #ccc; /* 边框宽度为1px，样式为实线，颜色为灰色 */
    border-top: 2px dashed #f00; /* 上边框宽度为2px，样式为虚线，颜色为红色 */
  }