块级元素和行内元素的区别

在css布局中，会经常使用的块级元素和行内元素，而且会经常混淆这二者的使用，下面我们就来对这二者做出明确的区别，便于大家区分这二者。

1、位置

块级元素会独占一行，

行内元素不会独占一行，相邻的行内元素会排列在一行，

2.宽高

块级元素可以设置宽高，默认情况下宽度会自动填充父类的宽度，

行内元素不可以设置宽高，宽度随着内容的宽度的变化而变化。

3.内外边距

块级元素可以设置margin，padding

行内元素有水平方向的margin-left，margin-right，padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

4.display

块级：display:block

行内：display:inline;

可以通过修改display属性来切换块级元素和行内元素