三种元素标签

行内、块状、行内块元素 完整区分

一、三种元素基础标签

1. 块状元素 block（display:block）

常见标签：div、p、h1~h6、ul、li、table、form

特点

1. 独占一整行，自动换行，前后自动换行
​
2. 能设置 width、height、margin、padding 全部生效
​
3. 不写宽度时，默认铺满父容器整行宽度

2. 行内元素 inline（display:inline）

常见标签：a、span、b、i、em、font

特点

1. 同行并排摆放，不会自动换行
​
2. 宽高设置无效，尺寸由内部文字内容决定
​
3. 上下margin、padding不生效，仅左右间距有效果

3. 行内块 inline-block（display:inline-block）

常见原生标签：img、input、td

特点（结合上面两种优点）

1. 同行并排，不自动换行
​
2. 可以正常设置 width、height、内外边距
​
3. 元素底部默认存在微小空白缝隙（可消除）
三、转换写法（任意标签可互相切换）

1. 转为块状： display:block; 
​
2. 转为行内： display:inline; 
​
3. 转为行内块： display:inline-block;