HTML基础元素的显示模式（行内，块级，和行内块）

喝杯卡布奇洛上路吧

于 2023-03-25 11:12:40 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/Blue_tracker/article/details/129764356

文章介绍了HTML中的三种元素类型：块级元素，如div、p，它们独占一行并可设置宽高；行内元素，如a、span，不独占一行，宽度由内容决定，不能直接设置宽高；以及行内块元素，如img、input，结合了行内和块级特性，不独占一行但可设置尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内联元素又名行内元素(inline element)，和其对应的是块元素(block element)

注意：行内块元素可以认为属于是特殊的行内元素

块级元素(block块元素)

(1)在页面独占一行
(2)默认宽度：撑满父元素
(3)默认高度：由内容撑开
(4)可以通过CSS设置宽高

常见的块级元素有：h1~h6,div,p,ul,ol.li等

行内元素(inline)

(1)在页面中不独占一行
(2)默认宽度：由内容撑开
(3)默认高度：由内容撑开
(4)无法通过CSS设置宽高

常见的行内元素有：a,span,br,del,strong,img,input等(其中img和input属于行内块)

行内块元素(inline-block)

(1)在页面中不独占一行
(2)默认宽度：由内容撑开
(3)默认高度：由内容撑开
(4)可以通过CSS设置宽高

常见的行内块元素有：img，input，select，button，textarea等

HTML基础 元素的显示模式（行内，块级，和行内块）