块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block)

独占一行，多个block元素会各自新起一行。默认情况下，block元素的宽度会填满父元素的宽度。

可以设置width, height属性。但是，即使设置了width属性，仍然独占一行。

可以设置margin, padding。

行内元素 (display: inline)

宽度随内容变化而变化。

多个inline元素会排在同一行里，直到一行排不下，才会换一行。

可以设置水平方向上的margin, padding，并且会影响布局。

width, height属性无效。(特指非替换元素，替换元素有效)

margin-top, margin-bottom属性无效。(特指非替换元素，替换元素有效)

padding-top, padding-bottom设置背景后可以看见内边距区域有增加，对于行内非替换元素，不会影响行高，不会撑开父元素。而对于替换元素，则撑开了父元素。

display: inline-block

该属性使得HTML元素的特点介于inline与block之间：

宽度随内容决定。

可以设置width, height, margin, padding。