• 是行内元素，却能设置宽高，为啥？因为它属于“可替换元素”，行为本身就比较特殊。
• 标签，既不像也没独占一行，因为它默认被设置成了 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普及之后，“块级/行内”的二分法思维已经不够用了。很多新引入的语义化标签，比如

、、，它们的默认display值完全由浏览器说了算，和标签本身的语义并不绑定。更关键的一点是：在CSS的世界里，display属性拥有至高无上的“覆盖权”。

所以，给个实用的建议：

• 别再纠结“本质上到底是块还是行内”，直接打开浏览器开发者工具，在“计算样式”面板里看它实时的display值。
• 调试布局时，养成习惯去检查元素的Computed样式，这才是它当前真正的行为依据。
• 一旦元素进入了Flex或Grid布局的容器，它的display类型就基本“失效”了——容器会把它当作Flex项目或Grid项目来统一管理。

总而言之，真正需要警惕的，往往不是标签的分类，而是那些更容易被忽略、却能隐性影响布局的属性。比如，white-space属性如何控制内文本的换行，或者box-sizing在inline-block元素上是否如期生效。这些问题，在实际开发中可比背诵一张“块级元素列表”要重要得多。