css盒子模型

所有html元素可以看做盒子,css盒模型本质上是一个盒子,包括边距,边框,填充和实际内容.

margin border padding content

margin 外边距 border 围绕在内边距和内容外的边框 padding 清除内容周围的区域,内边距是透明的

content 盒子的内容 

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。
  padding 和 margin 是边框 border是填充 border必须设置样式和背景
• background-color可以填充border内的颜色.

• div {
      background-color: lightgrey;
      width: 300px;
      border: 25px solid red;
      padding: 25px;
      margin: 25px;
  }