网站导航:首页-WEB前端-CSS中display属性值inline,block,inline-block的区别

CSS中display属性值inline,block,inline-block的区别

最近更新:2019-11-28

CSS中有一个diaplay属性,可以调整元素的显示类型,里面有很多可选的值,但最常用的就是inline、block、inline-block这三种,本文将详细介绍一下这三种属性的区别。

1、inline

inline为行内元素,HTML标签中的span标签、b标签、i标签等默认为inline元素,inline元素具有以下性质:

- 多个inline元素可以排列在一行;

- inline元素的宽高不能取决于width与height,而是由内容撑开;

- margin-top与margin-bottom对inline元素无效。

2、block

block为块级元素,HTML标签中的div标签、p标签等默认为block元素。绝对定位元素和浮动元素无论设置什么display值都会强制转换为block元素,block元素具有以下性质:

- block元素独占一行;

- block元素的宽高取决于width和height,在不设置自width的情况下会填满父级元素的宽度,在不设置高度的情况下,高度由内容撑开;

- block元素margin的top,left,bottom,right都能够产生边距效果。

3、inline-block

inline-block为行内块元素,对外展示为inline元素的特性,对内展示为block元素的性质,具有以下性质:

- inline-block元素不会独占一行;

- inline-block元素元素的宽高取决于width和height;

- inline-block元素margin的top,left,bottom,right都能够产生边距效果。

如果利用inline-block进行排版,经常会发现排版的周围有一些空隙,这通常是由于解析空格与基线对齐导致的,我们将在其他文章中介绍如何解决解析空格问题如何解决基线对齐问题

到底线啦,请:返回目录页|返回首页