盒模型

Content(内容) - 盒子的内容，显示文本和图像。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

应用:

paddin 10px 5px 15px 20px

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

padding: 10px 5px 15px

上内边距是 10px

右内边距和左内边距是 5px

下内边距是 15px

padding: 10px 5px

上内边距和下内边距是 10px

右内边距和左内边距是 5px

padding:10px

所有 4 个内边距都是 10px

Border(边框) - 围绕在内边距和内容外的边框。

值:

border-width:规定边框的宽度。

border-style:规定边框的样式。

border-color:规定边框的颜色。

应用:可单独设置上下左右

border-bottom-color:#.......

border-style:dotted solid double dashed; 

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

border-style:dotted;

所有 4 个边框都是点状

Margin(外边距) - 清除边框外的区域，外边距是透明的。

值:auto:浏览器计算外边距

应用:

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

margin:0px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

margin:10px;

所有 4 个外边距都是 10px

 

标签：模型,边框,5px,10px,外边,15px,border
来源： https://www.cnblogs.com/hxy-123/p/15552881.html