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

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、heightpadding、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