HTML中margin padding border区别

人生苦短 我用python

开始愉快的享(代)受(码)时间:

image

注意: 本文基本参照 https://blog.csdn.net/coco__d/article/details/53334481 感觉作者写的确实言简意赅

前言:

前端页面是需要给用户展示信息的，是离不开布局的，但是各个标签也不会挤在一起，有的标签距离很远有的很近，有的还有边框，这就需要调试出来了，其中margin、padding和border就是HTML中最常用的边框调试属性了

三者比较理解:

margin

是设置两个标签的间隔，也就是距离；

padding

例如一个p标签，它是100px100px,我们使用的时候p标签的文字是贴着p标签的最左侧的，想要它的文字距离边界远一点，好看一点，就是需要做一个样式的调整，我们可以用到padding这个属性，加入说设置是10px，就是说这个p标签的大小依然是100px100px，但是它的内容是变成了90px*90px

border

boarder是设置边框的意思，他和padding的区别在于，padding是在标签边缘往里缩减，而border是在标签的边缘往外扩展，也就是说是一个100px100px的标签，我设置他的border为20px，我们就可以看到整个标签的大小是变成了120px120px，也就是说多出来了20px，其标签的内容也还是100px*100px的

具体用法:

margin:

包括 margin-top、margin-bottom、margin-right、margin-left 例如:

margin: 40px 40px 40px 40px; 各40px 或者简写 margin:40px

margin: 30px 40px; 上下30px 左右40px

margin-bottom: 30px; 距离底部30px (上下左右分别为: top bottom left right)

padding:

包括 padding-top、padding-bottom、padding-right、padding-left 例如:

padding: 40px 40px 40px 40px; 各40px 或者简写 margin:40px

padding: 30px 40px; 上下30px 左右40px

padding-bottom: 30px; 距离底部30px (上下左右分别为: top bottom left right)

border:

包括 border-top、 border-bottom、 border-right、 border-left 与margin 和 padding 不同 border 需要指定边框颜色 和 类型 :

边框类型有: solid :实线 ,dashed :虚线, dotted:点线

border-bottom:#FF0000 2px solid; 设置下边框为红色 宽为2px 类型为实线

OK 打完收工!!