如何解决CSS3中盒子margin无效的问题?

问题1：盒子边框和内边距都会撑大盒子，想要盒子保持原尺寸如何解决？

方法1：手动内减（麻烦，易出错）

方法2：给盒子添加自动内减      box-sizing: border-box;（推荐）

问题2：margin合并现象 （垂直布局的块级元素，上下margin会合并）

(注：如不解决，最终的距离为margin的最大值）

方法：开发避免就可以,只设置一个盒子的上下外边距即可

问题3：嵌套块级元素塌陷

（互相嵌套的块级元素, 如果给子元素设置margin-top会作用在父元素身上）

方法1：给父元素设置 padding-top或 border-top

方法2：给父元素设置 overflow: hidden;

方法3：把子元素转换为行内块 display: inline-block;

方法4：浮动 绝对定位 相对定位的盒子不会有嵌套块级元素外边距塌陷现象

问题4：行内元素设置内外边距无效

两种情况：

水平布局设置 padding和margin 有效

垂直布局设置 margin 无效

如果要垂直布局padding和margin生效解决办法如下： 

转换为块或行内块

【padding和margin 以后如何选择】

父子关系 :padding

兄弟关系: margin