padding内间距，他是4个盒子中最温和的，基本不会出现什么反认知的现象。
说几个比较有意思的使用。
第一个直接用了padding，分隔符高度会比较高，第二个是通过伪元素+padding，可以实现分隔符长短的控制
margin负责外间距，通常块与块之间都会通过margin来分隔一下，虽然同样都是负责间距，相比于padding，margin就不太温和了，特异之处不少。
和 padding 属性一样，margin 的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。
首先，margin是支持负值的，这其实还是比较好理解的。
在这，margin在某些情况下是可以改变元素尺寸的，之前说盒子的时候提到过，box-sizing有两种，border-box和content-box，都是不包含margin的，那么margin是如何改变元素尺寸的呢。
如下图负的margin-left或者margin-right都会使子元素宽度变大。
在开发过程中或多或少应该都有过margin合并的经历，只是当时还不知道是啥原因，也不知道margin合并这个词，这不是个bug，而是故意这么设计的。margin合并有三种情况：
给子元素设置margin-top时，一开始是没有任何变化的，直到12px时才有变化，但不是子元素离父元素顶部具体增加，而是父元素离上面的margin距离增加。这边就有父子margin合并和相邻兄弟元素margin合并。
一般感觉我给子元素设置margin-top，那么应该是子元素距离父元素更远，但因为父子margin合并，导致效果是父元素具体上面的元素更远。如果不希望合并发生，有几种解决方法(以下是针对父元素和第一个子元素margin-top合并的解决方式，父元素和最后一个子元素margin-bottom合并的解决方式同理)：
相邻兄弟元素合并与父子(第一个子/最后一个子)合并
父元素设置overflow: hidden，父子的margin合并现象就消失了
空块级元素的 margin 合并：
margin:auto 的填充规则如下。
绝对定位可以实现水平垂直居中
hover时只要改color，就可以把border颜色一起改变
除了作为边框，border也有一些妙用
另：margin+padding 可以实现等高布局，border 属性也可以实现等高布局。
DIV块右侧留空自动取得margin-right: auto，操作方法如下：
1、首先新建HTML文件，创建HTML标签和内容，如下图所示。
2、然后预览效果如图。
3、然后设置文本的右外边距margin-right: 2cm，如下图所示。
4、接着设置文本的右外边距margin-right:100px，如下图所示。
5、最后预览效果如图，就完成了。
1、标签比如是块状元素，并且有个确定的宽度，百分比的宽度也行；padding的话, 设置成auto它会自动继承浏览器的padding值，因为有些奇葩浏览器是默认有padding值的，为了避免这个对样式造成影响，样式开头一般会加上一句*{margin:0padding:0}。
2、自适应，一般是自适应屏幕大小，比如我们的电脑、手机都有很多不同尺寸的屏幕，那么做出来的页面就要兼容这种尺寸的变化，而不会让布局错乱。
3、一般PC端布局样式是用百分比，不过移动端的话，因为对css3的兼容性非常好，所有要达到自适应，可以用css3来布局，当然还有比较流行的响应式布局。
4、层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
5、CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
