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. 三者核心区别对照表
元素类型 | 排列方式 | 宽高设置 | 边距特性 | 典型标签 |
|---|---|---|---|---|
块级元素 | 独占一行、垂直排列 | 可设置宽高 | 上下左右边距全部生效 | div、p、h系列、section |
行内元素 | 同行排列、水平布局 | 不可设置宽高 | 仅左右边距生效 | span、a、em、strong |
行内块元素 | 同行排列、水平布局 | 可设置宽高 | 上下左右边距全部生效 | img、input、button |