css 内联与块

内联元素可以理解为不能直接设置宽度和高度元素，比如span，你为他设置宽度和高度没有效果，除非你把它设置成块级元素。

如下面的代码把display:block;属性值去掉的话，宽度和高度都不会起作用了。

1	<span style="width:100px;height:100px;display:block;"></span>

 

margin可以控制内联和块级元素的间距，而不光是内联元素。

主要注意他们之间的转换问题，如块级元素加float属性会变为内联元素。

--------------------------------------------------------------------------------------------------------------------

 

display使用的最多属性值为：block（块级元素），inline（内联元素），inline-block(内联块元素)

通俗易懂的说：

块级元素（block）：可以设置宽高，margin，padding值等；

1 2	<div>我是块级元素DIV！</div> <p>我是块级元素P！</p>

上面的显示的结果：

1 2	我是块级元素DIV！ 我是块级元素P！

内联元素（inline）：不可以设置宽高，margin，padding值等；

1 2	<span>我是内联元素SPAN！</span> <em>我是内联元素EM！</em>

上面显示的结果（会在一排显示，这时你设置的宽高，margin，padding值都不起作用）：

1	我是内联元素SPAN！我是内联元素EM！

内联块元素(inline-block)：可以设置宽高，margin，padding值

1 2	<span>我是内联元素SPAN！</span> <em>我是内联元素EM！</em>

css：

1	span,em { padding: 0 5px; display: inline-block;}

上面显示的效果会在一排，但是同时宽高，margin，padding值也起作用；

1	我是内联元素SPAN！  我是内联元素EM！