行内元素默认不换行且不可设宽高，块级元素默认独占一行并撑满父容器；本质是display: inline与block的css默认值差异，而非语义规定。
行内元素默认不换行，块级元素自带换行和宽度撑满
浏览器渲染时，<span></span>、<a></a>、<strong></strong> 这类行内元素会紧贴前一个内容排列，不会主动折行；而 <div>、<code><p></p>、<h1></h1> 这些块级元素默认独占一行，且宽度自动填满父容器（除非显式设 width）。这不是“语义规定”，而是浏览器默认 CSS 的表现：display: inline vs display: block。
常见误判点：
-
<img>是行内元素，但能设宽高 —— 因为它属于replaced element（可替换元素），行为特殊 -
<button></button>默认是行内块（display: inline-block），既不换行又能设宽高 - 用
float或position: absolute会让块级元素“脱离文档流”，不再触发换行，但这不改变它的 display 类型
行内元素不能设 width/height/margin-top/bottom，但可以设 padding 和 line-height
这是开发中卡住最多的地方。比如给 <span></span> 加 height: 20px 或 margin-bottom: 10px，基本无效 —— 浏览器会忽略这些声明（或只影响行高/内边距的视觉挤压）。
真正起作用的写法：
- 想控制高度：改
line-height，或把display改成inline-block - 想加上下间距：用
padding-top/padding-bottom（会撑开行高），或外层包<div> <li>想让文字垂直居中：对行内元素，<code>vertical-align: middle配合line-height更可靠，而不是靠 margin - 元素间有看不见的空白（空格、换行符），会被渲染成 4px 左右间隙 —— 解决方法：父容器设
font-size: 0，子元素再重设字体大小；或让 HTML 标签连写不换行 - 垂直对齐默认是
baseline，导致元素底部不对齐 —— 显式加vertical-align: top或middle - IE8+ 支持良好，但 IE7 需要 hack（
*display: inline; *zoom: 1） - 别纠结
<em></em>“是不是行内”，直接看它当前 computed style 的display值 - 调试时用浏览器 DevTools 的 Styles 面板，点开元素右侧的
Computed标签页，查display实际值 - Flex / Grid 容器里的子元素，
display类型几乎失效 —— 它们统一按 flex item 或 grid item 处理
display: inline-block 是最常用的“折中方案”
当你要一个元素保持水平排列、又能设宽高/上下 margin 时，display: inline-block 就是首选。但要注意两个经典坑：
现代布局中，别硬记“哪些是块哪些是行内”
HTML5 后，很多新标签（如 <article></article>、<nav></nav>、<time></time>）默认 display 值和语义无关，全由浏览器决定。更关键的是：CSS 的 display 属性可以任意覆盖。
所以实际开发中：
真正需要警惕的，是那些隐式影响布局的属性：比如 white-space 对 <span></span> 换行的影响，或者 box-sizing 在 inline-block 上是否生效。这些比“块 or 行内”的标签分类更常出问题。
