行内元素、块级元素、行内块元素区别与特性

HTML所有元素默认分为三类，核心区别体现在排版方式、宽高设置、边距特性、默认布局，是CSS布局的基础核心。

1. 块级元素（block）

常见标签：div、p、h1-h6、ul、ol、li、section、article、header、footer、form

核心特性：

• 独占一行，默认从上到下垂直排列

• 宽度默认100%继承父级宽度

• 可以设置 width、height、padding、margin（上下左右全部生效）

• 可以嵌套块级元素、行内元素、行内块元素（p标签除外，p不能嵌套块级）

2. 行内元素（inline）

常见标签：span、a、em、strong、i、b、u、label

核心特性：

• 不独占一行，从左到右水平排列，自动换行

• 宽度高度默认由内容撑开，无法手动设置 width、height

• padding、margin仅左右生效，上下无效

• 只能嵌套行内元素，不能嵌套块级元素

3. 行内块元素（inline-block）

常见标签：img、input、button、select、textarea

核心特性（兼顾两者优点）：

• 不独占一行，水平排列

• 可以手动设置 width、height、padding、margin（上下左右全部生效）

• 默认存在空白间距问题（换行、空格导致），可通过父级 font-size:0 清除

4. 三者核心区别对照表