block box and inline box

[Q] CSS 中的 block box 與 inline box 有何差異?
[A]
在使用block 格式的上下文(context)中 :

• block 沿垂直方向擺置 上下相接
• 相接的margin 會縮併(collapse)

在使用inline 格式的上下文中 :

• block 沿水平方向擺置 左右相接
• 相接的margin 不縮併

//===
[Q] What's the difference between block box and inline box in css?

[A]
In a block formatting context, boxes are laid out one after the other, vertically
In an inline formatting context, boxes are laid out one after the other, horizontally.




//=== digest from CSS2 spec, chap9, Visual formatting model
" ... In a block formatting context, boxes are laid out one after the other, vertically,
beginning at the top of a containing block.

The vertical distance between two sibling boxes is determined by the 'margin' properties.

Vertical margins between adjacent block boxes in a block formatting context collapse.
...
"


"... In an inline formatting context, boxes are laid out horizontally, one after the other,
beginning at the top of a containing block.

Horizontal margins, borders, and padding are respected between these boxes.

The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.

The rectangular area that contains the boxes that form a line is called a line box.

..."


[ref]
http://www.w3.org/TR/CSS2/visuren.html#block-formatting