display:inline-block
是用来将元素显示为行内块级元素的属性。行内块级元素既具有行内元素可以并排排列的特性,又具有块级元素可以设置宽高、对齐等属性的特性。
常见的行内元素如 <span>
、<a>
等是不能设置宽高的,而使用 display:inline-block
后,这些元素就可以像块级元素一样设置宽高,同时又可以保持并排排列的特性,非常适合制作导航菜单、按钮等。
此外,display:inline-block
还可以用来解决元素间产生的空隙问题。因为行内元素默认有一个基线,而当两个行内元素之间有空格、换行符等空白字符时,就会产生一定的间隔。而使用 display:inline-block
后,元素间的空隙就会消失。
总之,display:inline-block
是一个非常实用的 CSS 属性,可以使元素既具有行内元素的特点,又具有块级元素的样式设置能力。