Question

关于CSS的内联和块元素

一般什么情况需要转换这2种元素？控制内联元素的间距是不是直接用margin就行了？
关于他们的应用有什么需要特别注意的地方？

Answer 1

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

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

<span style="width:100px;height:100px;display:block;background-color:blue;"></span>

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

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

不同DTD下，盒子模型不同。

还要清楚那些默认是块级，那些默认是内联。

Answer 2

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

通俗易懂的说：

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

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

上面的显示的结果：

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

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

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

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

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

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

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

css：

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

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

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

Answer 3

• 行级元素会自动换行，可以设置行高，margin，高等，

• 内联元素，不会换行，设置行高和高都不管用，但是能设置宽度，（上下不管用，左右管用）

• dispaly:block;  设为行级元素,

• display:inline    默认。此元素会被显示为内联元素,