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

布局的基本元素：块级元素和行内元素。

块级元素有：div、p、form、ul、ol、li等。

常见的行内元素有span、strong、em等。

 

区别：

1.块级元素会独占一行，默认情况下，其宽度自动填满其父元素的宽度。

2.行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

 

3.块级元素可以设置width、height属性。

4.行内元素设置width、height属性无效。

 

5.注意，块级元素即使设置了宽度，仍然是独占一行的。

 

6.块级元素可以设置margin和padding属性。

 

7.行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距的效果，

但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距的效果。

 

8.对于行内元素，竖直方向的margin看不到任何效果，竖直方向的padding虽然增大了行内元素的面积，但并没有和相邻元素拉开距离。

 

 

9.块级元素和行内元素的CSS相关属性是display，其中块级元素对应于display:block,行内元素对应于display:inline，可以通过修改display属性来切换块级元素和行内元素。