内边距(padding):指的是盒子内容区和盒子边框之间的距离,通过padding-top,padding-right,padding-bottom,padding-left来设置四个方向的内边框,会影响盒子可见框的大小。
盒子的大小由内容区,内边框和边框共同决定。
盒子的外边距:
盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置,样式:margin-XXX(接像素或auto【对水平方向设置,默认父元素居中,垂直默认为0】)由于页面中的元素靠左上摆放,所以设置上左边距时,盒子位置会发生改变。
垂直边距的重叠:
在网页中“垂直方向”的“相邻外边距”会发生重叠,所谓的外边距重叠之相邻兄弟元素边距取最大值,如果父子元素的垂直外边距相邻了,子元素的外边距会传递给父元素。
浏览器的默认样式:
浏览器为了在页面没有样式时依旧有一个良好的显示效果,会对许多元素设置默认样式,通过通配标签*全部清除。
内联元素的盒模型:
内联元素设置的width和height无法生效。设置水平内边距,内联元素可以设置水平方向的内边距,垂直方向的内边距但不影响内容布局。对于边框,内联元素垂直方向上也不影响内容布局。内联元素的外边距不会发生重叠,但依旧不支持垂直方向。