块级元素、行内元素以及行内块元素的区别

一、块级元素

1. 常见的有：div、ul、dl、ol、li、table、h1-h6、p、form、hr

2. 设置方式： display: block

3. 特点：

• 一个块级元素占据一行；

• 可以设置 width、height、padding 以及 margin 值；

• 块级元素可以包含块级元素、行内元素以及行内块元素，文本类型块级元素特 殊：如 h1-h6、p 标签，只能包含文本；

• 宽度默认为父级元素宽度。

二、行内元素

1. 常见的有：a、span、sub、sup、br、strong、b、em、i、label

2. 设置方式： display: inline

3. 特点：

• 一行内可以存在多个；

• 无法设置 width、height，padding、margin 值不能设置垂直方向，只可以设置水平 方向，可以设置 line-height；

• 一个行内元素内可以包括行内元素和文本内容，a 标签特殊：可以放块级元素、行 内块元素，但不能再放一个a标签；

• 宽度默认随文本内容变化。【宽度默认由内容撑开】

三、行内块元素

1. 常见的有：img、input、td

2. 设置方式：display: inline-block

3. 特点：

• 一行可存在多个行内块元素，但它们之间存在空隙；

• 可以设置 width、height、padding 以及 margin 值；

• 宽度默认随文本内容变化。【宽度默认由内容撑开】