、

这些块级元素默认独占一行，且宽度自动填满父容器（除非显式设 width）。这不是“语义规定”，而是浏览器默认 CSS 的表现：display: inline vs display: block。

常见误判点：

• 是行内元素，但能设宽高 —— 因为它属于 replaced element（可替换元素），行为特殊
• 默认是行内块（display: inline-block），既不换行又能设宽高
• 用 float 或 position: absolute 会让块级元素“脱离文档流”，不再触发换行，但这不改变它的 display 类型

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

这是开发中卡住最多的地方。比如给 加 height: 20px 或 margin-bottom: 10px，基本无效 —— 浏览器会忽略这些声明（或只影响行高/内边距的视觉挤压）。

真正起作用的写法：

• 想控制高度：改 line-height，或把 display 改成 inline-block
• 想加上下间距：用 padding-top/padding-bottom（会撑开行高），或外层包
• 想让文字垂直居中：对行内元素，vertical-align: middle 配合 line-height 更可靠，而不是靠 margin

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

当你要一个元素保持水平排列、又能设宽高/上下 margin 时，display: inline-block 就是首选。但要注意两个经典坑：

• 元素间有看不见的空白（空格、换行符），会被渲染成 4px 左右间隙 —— 解决方法：父容器设 font-size: 0，子元素再重设字体大小；或让 HTML 标签连写不换行
• 垂直对齐默认是 baseline，导致元素底部不对齐 —— 显式加 vertical-align: top 或 middle
• IE8+ 支持良好，但 IE7 需要 hack（*display: inline; *zoom: 1）

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

HTML5 后，很多新标签（如