内外边距、文档流

内边距（padding）：指的是盒子的内容区与盒子边框之间的距离，一共有四个方向：

padding-top

padding-right

padding-bottom

padding-left

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。

盒子的大小由内容区、内边距和边框共同决定

盒子宽度 = width+左右两边的内边距+左右两边的边框

盒子高度 = height+上下两边的内边距+上下两边的边框

外边距 (margin) ：指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top

margin-right

margin-bottom

margin-left

由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置。

文档流：

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。

元素在文档流中的特点：

块元素

1.块元素在文档流中会独占一行，块元素会自上向下排列。

2.块元素在文档流中默认宽度是父元素的100%。

3.块元素在文档流中的高度默认被内容撑开。

内联元素

1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。

2.在文档流中，内联元素的宽度和高度默认都被内容撑开。

内边距

外边距

文档流