6.元素的display属性

6.元素的display属性

（1）定义：规定元素应该生成的框的类型

（2）常用属性值：

inline：默认值。元素会被显示为内联元素。

none：元素不会被显示。

block：元素将显示为块级元素。

inline-block：行内块元素，即元素像行内元素一样显示，内容像块元素一样显示。

list-item：元素像块元素一样显示，并添加样式列表标记。

table：元素会作为块级表格来显示。

table-caption：元素会作为一个表格标题显示。

inherit：从父元素继承display属性。

（3）display属性值inline和block的区别：

block元素会独占一行，默认情况下，block元素宽度自动填满父级元素的宽度；

block元素可以设置width、height属性，即使设置了宽度，仍然是独占一行；

block元素可以设置margin和padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里面，其宽度随元素的内容而变化；

inline元素设置width、height无效；

inline元素的margin和padding属性在水平方向上能产生边距效果，垂直方向不会产生边距效果。

（4）display:inline-block元素显示间隙

A、inline-block水平呈现的元素之间，HTML元素标签换行显示或标签之间有空格的情况下会有间距

B、消除办法：移除标签之间的空格；

使用margin-left或margin-right取负值；

对父元素设置font-size为0，然后对元素的font-size初始化；

对父元素设置letter-spacing（字符间距）为负值，然后设置元素的letter-spacing为0；

对父元素设置word-spacing（单词间距）为负值，然后设置元素的word-spacing为0。