inline-block-inline-block的简单区别_1.inline、block的区别是什么二者之间如何转换-优快云博客

本文详细解释了CSS中三种常见的元素显示模式：block、inline与inline-block的区别与应用场景。包括它们各自的特点、如何使用以及何时在inline与block之间进行转换。

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

css中inline、block、inline-block的区别

display:block就是将元素显示为块级元素.

block元素的特点是：

块级元素只能出现在 <body> 元素内。
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；

主要的块级元素：

这里写图片描述

display:inline就是将元素显示为行内元素.

inline元素的特点是：

一般情况下，行内元素只能包含数据和其他行内元素；
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变；

主要的行内元素：
这里写图片描述

在以下情况下需要在inline和block之间切换（display：…):

让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）