内联元素：也称为行内元素，当多个行内元素连续排列时，他们会显示在一行里面。
内联元素的特性：本身是无法设置宽度和高度属性的，但是可以通过CSS样式来控制，达到我们想要的宽度和高度。
span举例1：
1. span元素属于内联元素，当我们直接设置了宽度和高度的时候代码及显示的结果如下:
...
<style type="text/css">
span{border:1px solid blue;width:200px;height:200px;}
</style>
...
<span>我是内联元素</span>
虽然定义了宽度和高度，但是并没有起作用。
2. 在样式属性中添加display:block。
<style type="text/css">
span{border:1px solid blue;width:200px;height:200px;display:block;}
</style>
这时候可以看到长度和宽度起作用了。
span举例2：
1. 定义2个并排的span元素，并定义样式display属性设置为block,分别显示如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size:12px;
text-align: center;
line-height:20px;
margin-left:5px;
border:1px solid red;
background-color:red;
color:white;
width:100px;
height:20px;
display:block;
}
</style>
</head>
<body> <span>放大</span><span>缩小</span>
</body>
</html>
当定义display:block的时候，表示的span的属性变成一个行级块元素，所以这时候显示在两行中。
2.修改display的属性，display:inline-block;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size:12px;
text-align: center;
line-height:20px;
margin-left:5px;
border:1px solid red;
background-color:red;
color:white;
width:100px;
height:20px;
display:inline-block;
}
</style>
</head>
<body> <span>放大</span><span>缩小</span>
</body>
</html>
这样可以就可以将span元素放到一行，并且可以使用css来自定义元素的大小样式了。
inline-block: 既有inline的同行特性，又有block的宽度和高度特性。