html 中 行内元素, 块状元素和行内块状元素的区别

1. 代码

/* 行内元素 */
display: inline;

/* 块状元素 */
display: block;

/* 行内块状元素 */
display: inline-block;

2. 设置

2.1 行内元素

最常行内元素: span, a, label, i, sub, sup, button, input, label, select, textarea 等等.

特征:

1. 设置宽高无效
2. 对 margin 仅设置左右方向有效, 上下无效; padding 设置上下左右都有效, 有点标签上下设置显示无效
3. 不会自动进行换行

2.2 块状元素

最常块状元素: div, p, form, ul, ol, table, hr, br, h1 等等.

特征:

1. 能够识别宽高
2. 对 margin 和 padding 的上下左右均对其有效
3. 多个块状元素标签写在一起, 默认排列方式为从上至下

2.3 行内块状元素

特征:

1. 不自动换行
2. 能够识别宽高
3. 默认排列方式为从左到右