行内元素和块级元素的那些事

一、简介

1.行内元素：span、strong、em、br、img、input、label、select、textarea

2.块级元素：div、p、ul、li、ol、dl、form、table

3.内联元素：a、cite

二、区别：

1.块级元素会占一行，其宽度会自动填满父元素的宽度，而行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下时，才会换行，其宽度随着元素的内容而变化。

2.块级元素可以设置width、height属性，行内元素设置width、height无效。

3.块级元素可以设置margin和padding，行内元素水平方向的padding-left、padding-right、margin-left、margin-right都会产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果，即水平方向有效，竖直方向无效。

三、互相转换

1.行内元素转块级元素：display:block;

2.块级元素转行内元素：display:inline;

3.行内块级元素：display:inline-block;

注：行内元素设置成display:inline-block就可以设置竖直方向的属性了（padding-top、margin-bottom等等）。