三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

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

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

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

← 返回列表