display:inline是块状元素转变为内联元素，转变之后就没有块状元素的特征了， 不能设置 widht height

但可以设置 内边距（padding） 外边距（margin)的left /right属性

html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用块状元素： <p><div> <h1>...<h6><address> <ol><ul><dl><table> <blockquote><form>

常用内联元素： <span><a><br><i><em><strong><lible><q><var><cite><code>

常用内联块状元素： <img><input>

关于三种元素，大家有没有发现一个规律：

块状元素都自带换行效果；

内联元素都是定义行内小区域且不换行，但如果没有内容就没有意义，不占空间；

内联块状元素除了不换行，即使没有内容也会占空间。

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联元素不可设置上下的内外边距（padding-top,padding-bottom,margin-top,margin-bottom），但是可以设置左右的内外边距(padding-left,padding-right,margin-left,margin-right)。上下不行左右行。