行内元素和块级元素有什么区别？

这个问题可是前端布局的基石，我干了20年全栈，见过不少新手在这儿栽跟头。简单说，行内元素就像句子里的单词，挨着排；块级元素则像段落，自个儿占一整行。

咱们先看行内元素。典型代表是<span>、<a>、<strong>这些。它们默认不会打断内容流，一个接一个地横向排列，宽度刚好包住内容。你给它们设宽高基本没用，边距和填充也只影响左右，上下空间挤不动别的元素。看段代码就明白了：

<span>行内元素1</span>
<span>行内元素2</span>

这俩span会紧挨着显示在同一行。

块级元素就霸气多了，比如<div>、<p>、<h1>。它们天生独占一行，不管你内容多窄，前后都会自动换行。而且，你可以随意设置它们的宽度、高度、内外边距，对整个布局影响巨大。同样举个例子：

<div>块级元素1</div>
<div>块级元素2</div>

这两个div会上下堆叠，各占一行。

关键区别就在这儿：行内元素适合包裹小段内容，强调或链接文本；块级元素则是构建页面骨架的砖块，用来分区、分组。现代CSS虽然能用display属性切换它们的行为（比如把div变成inline-block），但理解默认特性，能让你在写样式时少走很多弯路。

实际干活时，我常提醒团队：别用行内元素去包块级元素，那会破坏HTML语义，也容易导致布局错乱。分清谁是谁，你的CSS写起来会顺手得多。