html 中 行内元素 和 块状元素的区别
1. 代码
/* 行内元素 */
display: inline;
/* 块状元素 */
display: block;
/* 行内块状元素 */
display: inline-block;
2. 设置
2.1 行内元素
最常行内元素: span, a, label, i, sub, sup, button, input, label, select, textarea 等等.
特征:
- 设置宽高无效
- 对 margin 仅设置左右方向有效, 上下无效; padding 设置上下左右都有效, 有点标签上下设置显示无效
- 不会自动进行换行
2.2 块状元素
最常块状元素: div, p, form, ul, ol, table, hr, br, h1 等等.
特征:
- 能够识别宽高
- 对 margin 和 padding 的上下左右均对其有效
- 多个块状元素标签写在一起, 默认排列方式为从上至下
2.3 行内块状元素
特征:
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右