行内元素与块级元素详解

常见的行内元素有哪些，块级元素有哪些，空(void)元素有那些?

行内元素：a b i span img input select strong（强调的语气）textarea等

块级元素：div ul ol li dl dt dd h1 h2 h3 h4…p section table等

空元素：<br> <hr> <img> <input> <link> <meta>等

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

行内元素----css的display属性是inline，不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化，设置高度和宽度的话会不起作用，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。

块级元素----css的display属性是block，会独占一行。默认情况下，其宽度自动填满其父元素宽度，宽高可以设置，但设置了宽度还是独占一行。

注：

修改display为block，可以把行内元素变成块级元素，修改display为inline，可以把块级元素变成行内元素。

display为inline-block时，可以使行内元素保持在一行内，但具有块级元素的特点。