问题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