css属性之padding和margin

css属性之padding和margin,并探究给行内元素设置内外边距是否有效!

padding和margin的作用（重要）

• padding:内边距(影响盒子的大小)

  padding-top:上内边距 ; padding-right:右内边距;padding-bottom:下内边距 ;padding-left:左内边距

  简写时: padding:10px 代表上下左右四个内边距相等都为10px

  ​ padding:10px 20px 代表上下内边距10px,左右内边距20px

  ​ padding:10px 20px 30px 代表上内边距10px ,左右内边距20px,下内边距30px

  ​ padding:10% 代表上下左右四个内边距为宽度的10%

• margin:外边距(控制盒子的位置)

  margin-tom:上内边距; margin-right:右内边距; margin-bottom:下内边距 ;margin-left:左内边距

  简写时:margin:10px 代表上下左右四个外边距相等都为10px

  ​ margin:10px 20px 代表上下外边距10px,左右外边距20px

  ​ margin:10px 20px 30px 代表上外边距10px ,左右外边距20px,下外边距30px

  ​ margin:10% 代表上下左右四个外边距为宽度的10%

  如图，1为内容区，2为内边距 四个内边距均为50px，3为外边距 四个外边距均为50px

如下图兄弟元素之间,相邻元素的外边距会重叠而不是相加,如图,块级元素1和块级元素2两个元素的外边距为50px

实测行内元素垂直方向的内边距和外边距是否有作用

如下两图可知：行内元素垂直方向的内边距和外边距,看似有效果,实际并没有作用

因为根据padding和margin的作用(顶部的解释)我们知道,padding-top,padding-bottom和margin-top和margin-bottom如果有效,盒子的大小和位置会被改变,且会影响到其他的盒子

通过元素审查和修改行内元素的padding值和margin值,我们会发现垂直方向上,行内元素相邻的两个块级元素，块级元素2和块级元素3位置和距离没有受到任何影响

所以我们认为padding-top,padding-bottom和margin-top和margin-bottom,对行内元素看似有效实则无效

特殊的行内元素img，设置padding和margin 有效

如图我们通过审查元素和修改padding和margin的值我们发现，img的大小发生了变化，且会影响到相邻的块级元素的位置，所以padding和margin对行内元素img是真实有效的

以上为我个人理解后所写笔记,感谢另一位博主博客的解惑,链接感谢https://blog.csdn.net/qq_37621289/article/details/82859024