inline-block和block的区别

Question

啊，
好像有点记不清楚了，
inline-block 和 block的区别
还保留有有行内元素的特性?

记得block是可以设宽高，margin-left margin-right
inline 不造了 ...

我是猪 ...

Answer 1

首先区分block元素和inline元素：
1.block元素可以包含block元素和inline联元素；但inline元素只能包含inline元素。
2.block元素通常被现实为独立的一块，前后之间会换行；inline元素则不会产生换行。
3.在css盒式模型中，inline盒式模型将不支持对margin, width, height, max/min-width/height 等属性的垂直响应，而block盒式模型则支持。

inline-block将会使元素成为一个inline元素（如后跟内联元素，将不会换行），但本身却扔支持block元素的属性。

<div>A</div>
<span>B</span>

此时div为block元素，span为inline元素，显示顺序为 A->换行->B。
对block元素使用inline-block属性。

<div style="display:inline-block;margin-top:10px">A</div>
<span>B</span>

此时div为inline元素，但仍然支持margin的垂直属性top，显示顺序为 A->同行->B(整体下降10px)。
对inline元素使用inline-block属性。

<div>A</div>
<span style="display:inline-block;margin-top:10px">B</span>
<span>C</span>

此时div为block元素，B仍然为inline元素，但开始支持margin的垂直属性top，C为inline元素。显示顺序为A->换行->B->同行->C(B,C整体下降10px)。

Answer 2

display: inline

display: inline-block

display: block

stackoverflow:What is the difference between display: inline and display: inline-block?

Answer 3

inline-block vs block
共同点：都有宽度和高度
区别：block会换行，inline-block不换行。
inline-block时：ie6得有*zoom:1来触发元素hasLayout才会表现出来。

Answer 4

block是BFC
inline-block是IFC

Answer 5

没去查，凭印象说下，如果有错误麻烦更正。

inline 没有高度，不接受上下的margin和padding，不占据一行
block 有高度，接受上下margin和padding，占据一行

inline-block 有高度，接受上下margin，padding，还不占据一行。