Question

display:inline-block;什么意思

Answer 1

Display：inline-block是内联元素，简单来说就是在同一行显示。

内联元素（html规范中的概念）英文：inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display：inline；这个属性能够修复著名的IE双倍浮动边界问题。

内联元素又名行内元素和其对应的是块元素，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。

而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display：block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display：inline这样的属性，让它也在一行上排列。

总的来说，内联元素一般都是基于语义级（semantic）的基本元素，它只能容纳文本或者其他内联元素，通常被包括在块元素中使用，常见内联元素有“a、b、br”等。

内联元素和块级元素区别：

一、显示方式不同

1、块级元素：是块元素都从新行开始，相邻的块级元素将会在不同行显示。

2、内联元素：一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。

二、高度不同

1、块级元素：高度，行高以及外边距和内边距都可控制，以容纳内联元素和其他块元素。

2、内联元素：高度、行高和顶以及底边距都不可改变。

三、宽度设置不同

1、块级元素：宽度缺省是它的容器的100%，除非设定一个宽度。

2、内联元素：宽度就是它的文字或图片的宽度，不可改变。