所以，才会紧贴着前一个内容排列，而

总是不由分说地另起一行，并把宽度拉满。当然，现实生活里总有特例，这就引出几个常让人迷惑的点：

• 是行内元素，却能设置宽高，为啥？因为它属于“可替换元素”，行为本身就比较特殊。
• 标签，既不像也没独占一行，因为它默认被设置成了 display: inline-block，属于两者之间的折中方案。
• 用 float 浮动或者position: absolute绝对定位，会让一个块级元素“飘”起来，不再触发换行，但这可没改变它最根本的display类型。

行内元素不能设 width/height/margin-top/bottom，但可以设 padding 和 line-height

这个规则，可以说是前端布局中最容易“踩坑”的地方之一。比如，给一个标签设置height: 20px或者幻想它能通过margin-bottom和下方内容拉开距离，结果往往是徒劳的——浏览器通常直接忽略，顶多影响一下行高或产生视觉挤压。

真正想实现这些效果，得对症下药：

• 想控制高度？别指望height，调整line-height（行高）或者干脆把它的display改成inline-block。
• 想添加上下间距？用padding-top和padding-bottom是可行的（虽然会把行高撑开），或者更干脆点，外面直接套一个

  包裹起来。

• 想让行内文本垂直居中？别依赖margin，vertical-align: middle配合精心计算的line-height往往更靠谱。

display: inline-block 是最常用的“折中方案”

当你需要元素既能水平排列，又能像块级元素那样自由设置宽高和边距时，display: inline-block就是首选答案。不过，这个“万金油”也有两个经典的小毛病：

• 空隙问题：元素之间的换行符或空格，会被当成一个空白字符渲染，产生几个像素的间隙。怎么解决呢？要么给父容器设置font-size: 0，子元素再重新设定字体大小；要么简单粗暴，在HTML里让标签紧紧连在一起，不留任何空格和换行。
• 对齐问题：它的默认垂直对齐方式是baseline（基线对齐），经常导致相邻元素底部参差不齐。解决方法很直接，显式地加上vertical-align: top 或 middle。
• 兼容性方面，它对IE8及以上版本支持良好，但如果要照顾IE7，就需要加上*display: inline; *zoom: 1这样的补丁。

现代布局中，别硬记“哪些是块哪些是行内”

时至今日，尤其是在HTML5普及之后，“块级/行内”的二分法思维已经不够用了。很多新引入的语义化标签，比如