inline-block：在网页中使用内联块级元素

网页中的任何元素都是矩形的，我们可以将它们想象为一个盒子。盒子的类型会影响它在页面上的视觉效果。在CSS中主要有两种类型的盒子类型：inline和block。

inline元素（或内联元素）在同一行按从左至右的顺序显示，不单独占一行。最常见的内联元素有：<span>、<em>和<img>等。内联元素可以有padding和margin，但是为内联元素设置宽度和高度是没有意义的。给内联元素设置padding和margin只会影响元素水平方向上的空间，垂直方向上的空间不会发生变化。

Inline-block元素和inline元素类似，但是可以为Inline-block元素设置宽度和高度。给Inline-block元素设置宽度和高度将会影响该元素的水平和垂直方向上的空间。

除了inline和block元素，CSS的display属性还可以使用其他的显示方式：display: table和display:flex。

CSS display属性的各种取值

内联元素（Inline Elements）

正如上面说的，为内联元素设置padding和margin只会使其在水平方向上受到影响。margin-top、margin-bottom、padding-bottom和padding-top将会被忽略。

为内联元素设置边框border属性只会影响left和right，border-top和border-bottom是没有效果的。内联元素的内容决定了它的尺寸大小（padding-left和padding-right），并且内联元素不能设置宽度和高度。

块级元素（Block Elements）

默认情况下，一个块级元素会占满容器的一行。块级元素的高度由它的内容决定。可以通过CSS为块级元素设置宽度和高度。也可以为块级元素在所有的边上设置margin，padding和border。

常见的块级元素有：<p>、<ul>和<h1>等。

内联块级元素（Inline-Block）

内联块级元素是上面两种元素的混合体。Inline-block元素可以设置宽度和高度，在所有的边上都可以设置margin，padding和border。

但是Inline-block元素属于inline元素，意思是它们不会独占一行，而是会和其它inline元素和Inline-block元素在同一行按从左至右的顺序显示。

Inline-Block元素实战

讲解inline-block属性的最佳例子是使用inline-block元素来制作一个导航菜单：

<nav>
  <a href="#">主页</a>
  <a href="#">产品介绍</a>
  <a href="#">关于我们</a>
  <a href="#">帮助</a>
</nav>                              
                            

为上面的导航菜单添加下面的CSS样式：

nav { background: #222 url(debut_dark.png); }
nav a { font-family: Proxima Nova, sans-serif; color: #fff;
text-decoration: none; transition: .4s; }
nav a:hover { background: rgba(255,0,0,0.5); }                              
                            

上面的代码得到的结果如下：

上面的每个主菜单都贴得比较的近，可以为它们添加一些padding。

nav a { padding: 1rem; }                              
                            

我们可以直接为<a>元素添加padding来使各个子菜单分离开来。但是这不是我们想要的结果，试着用鼠标滑过上面的菜单看看，红色的边框已经溢出了导航菜单的上部和下部。作为内联元素，为<a>元素设置padding会影响它的左边和右边，但是padding不会计算<a>元素的上部和下部的高度。

有多种方法可以解决这个问题，例如为<nav>元素设置padding来平衡<a>元素超出的高度。但是更好的和更简单的方法是将<a>元素设置为块级内联元素：

nav a { display: inline-block; padding: 1rem; }                              
                            

现在，padding将影响<a>元素的所有边，于是我们得到了正确的结果。

inline-block的不足之处

inline-block有一些不足之处：它会自动在同一行元素之间插入空白的空间。一个解决方法是将所有内联块级<a>元素的HTML代码中的换行和空格都清除掉：

<nav>
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a><a href="#">Help</a>
</nav>                              
                            

这个方法还可以减小文件的尺寸，加快页面传输的速度。

另一种稍复杂的方法是通过CSS来消除这些不必要的空间。这个方法是在父元素上设置font-size为0。

nav { font-size: 0; }                              
                            

当然，这样做会使<nav>元素喜爱的所有子元素的font-size都变为0，所以我们还要为子元素设置它们的font-size。

nav a { font-size: 1rem; }                              
                            

上面两种方法你可以任选一种来使用。

inline-block和flex结合使用

inline-block元素可以很容易的和flex布局结合使用。例如上面的导航菜单例子，我们可以将前3个菜单项作为一组，使用一个<div>将他们包裹起来：

<nav>
<div><a href="#">主页</a><a href="#">产品介绍</a><a href="#">关于我们</a></div>
<a href="#">帮助</a>
</nav>                              
                            

然后将<nav>元素设置为flex布局，使两个组的内容分离开来。

nav { display: flex; justify-content: space-between; }                              
                            

得到的结果如下：

小结

所有的浏览器都支持inline-block元素，包括IE8+。inline-block元素在页面设计中是非常重要，非常有用的元素，我们需要认真的去理解和学习它。inline和block元素都有它们各自的局限性，inline-block元素是它们的有效的补充，使用好inline-block元素将使你的页面设计如鱼得水。