HTML行内元素块级元素行内块级元素的特点与区别

Posted 2022-02-13 paul666

元素

html 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

元素分类方式

HTML 可以将元素分类方式分为行内元素、块状元素和行内块状元素三种，这三者可以通过设置display属性值实现相互转化。实现如下

#转换为行内元素
display:inline;

#转换为块状元素
display:block;

#转换为行内块状元素
display:inline-block;

元素特点

行内元素

• 不会自动换行
• 设置宽高无效
• 设置margin上下方向无效，左右方向有效
• 设置padding上下左右方向都有效

常用的元素有：span 、a、b、br、u、ur等等

行内块状元素

• 不会自动换行
• 可以识别宽高
• 默认排列方式为从左到右

常用的元素有：img、input、td等

块状元素

• 自动换行
• 可以识别宽高
• 设置margin和padding的上下左右均有效
• 多个块状元素标签写在一起，默认排列方式为从上至下

常用的元素有：div、p、ul、ol、li、h1、h2等