行内元素默认不换行且不可设宽高，块级元素默认独占一行并撑满父容器；本质是display: inline与block的CSS默认值差异，而非语义规定。
行内元素默认不换行，块级元素自带换行和宽度撑满
刚入门的时候，很多人会死记硬背：哦，、、 是行内的，、、是块级的。这没错，但关键得理解背后的原因——这其实是一系列浏览器默认样式在起作用，而不是什么不可逾越的语义鸿沟。简单说，浏览器在初始化样式表里，就给这些元素预设好了display: inline 或者 display: block。
所以，才会紧贴着前一个内容排列，而总是不由分说地另起一行，并把宽度拉满。当然，现实生活里总有特例，这就引出几个常让人迷惑的点：
标签，既不像也没独占一行，因为它默认被设置成了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元素上是否如期生效。这些问题，在实际开发中可比背诵一张“块级元素列表”要重要得多。
