一、边框：border
①、复合写法：border: 1px solid #ccc;
②、边框会撑大盒子的大小。
二、内边距：padding
①、复合写法：padding: 10px 5px; 上下10，左右5.
②、padding是内容与盒子边框之间的距离，给内容的父亲添加。
③、padding会撑大盒子。
④、如果盒子没有宽高，就不会撑大盒子；如果盒子只有高，就会撑大高，只有宽，就会撑大宽。
三、外边距：margin
①、复合写法：margin: 10px 5px; 上下10，左右5.
②、margin是盒子与盒子之间的距离。
③、margin应用：让块级元素水平居中： margin; 0 auto；
四、外边距应用及塌陷问题：
①、行内元素或者行内块元素要水平居中就给他的父亲添加 text-align: center; 垂直居中就是 行高等于高。
②、两个嵌套的块元素，如果父亲有外边距，子元素也有外边距，此时父元素会塌陷；或者直接给子元素一个外边距父元素也会塌陷。
③、解决：给父元素添加 overflow: hidden;
五、网页会自带一些内外边距：
①、比如自带padding和margin，一些元素也会自带，比如 ul。
②、清除： * {margin; 0 padding:0}。
③、行内元素为了照顾兼容性尽量只设置左右的内外边距，不要设置上下内外边距；设置了也是无效的。
④、行内元素直接就看做是文字就行了。
原文：https://www.cnblogs.com/wan520/p/14258872.html