块级元素默认独占一行且可设宽高和四向边距，行内元素默认水平排列、宽高无效、仅左右边距生效；嵌套时行内元素不能直接包含块级元素，修改display值会改变其布局行为与限制。
块级元素默认独占一行，行内元素默认水平流式排列
这是最直观的布局差异：一个 <p></p> 或 <div> 无论内容多短，前后都会强制换行；而 <code><span></span>、<a></a>、<strong></strong> 会紧挨着前面的文本或元素排在同一行，直到行宽不够才折行。
这种行为不是靠 CSS“加出来”的，而是浏览器在正常流（Normal Flow）中对元素的**默认 display 值**决定的：<div> 默认是 <code>display: block，<span></span> 默认是 display: inline。你可以用开发者工具看 computed 样式验证这一点。
宽高和边距能否生效，取决于 display 类型
块级元素能自由设置 width、height、margin（四方向）、padding（四方向）——这些值都会真实影响布局。
行内元素则不同：
立即学习“前端免费学习笔记（深入）”；
-
width和height设置无效（除非改display） -
margin-top/margin-bottom看似写了，但不会推开上下行元素（常见误解：以为它“没效果”，其实是不参与行框垂直堆叠） -
padding-top/padding-bottom虽然渲染出背景和边框，但不撑开 line-height，可能造成文字重叠或裁剪 -
margin-left/margin-right和padding-left/padding-right是唯一真正起作用的边距方向
嵌套规则：行内元素不能直接包块级元素
HTML 规范明确限制：像 <span></span>、<a></a> 这类纯行内元素，内部写 <div> 或 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 属于结构错误。虽然现代浏览器大多会“容错修复”（比如把 <p></p> 提到 <a></a> 外面），但会导致 DOM 结构意外变动、语义丢失、甚至 JS 选择器失效。
正确做法只有两种：
- 改容器为块级（如用
<div> 包含 <code><a></a>） - 或用
display: inline-block/display: flex等方式让父元素“既保持行内流又支持嵌套”
特别注意：<input> 和 <img alt="css属性块级和行内区别是什么_通过显示规则理解布局差异" > 虽然常被当“行内用”，但它们本质是 inline-block，所以能设宽高、能包含伪元素、也能作为 flex item 安全使用。
用 display 切换类型时，要警惕隐式行为变化
把 <span></span> 改成 display: block，它就真变成块级了——会换行、能设宽高、能包 <div>；反过来把 <code><div> 设成 <code>display: inline，它就失去换行能力，同时 width/height 失效，且不能再作为 flex 容器（display: inline 不触发 flex 上下文）。
更隐蔽的问题是：行内元素转 inline-block 后，HTML 源码里的换行符和空格会渲染成约 4px 的空白间隙。这不是 bug，是规范行为。解决它要么删 HTML 换行，要么父元素设 font-size: 0（记得子元素重设 font-size），要么直接上 display: flex ——后者现在基本是首选。
布局逻辑一旦脱离“默认 display 行为”，就要同步检查盒模型、流式关系、嵌套合法性——很多样式异常，源头只是忘了 display 已经悄悄改写了元素的底层角色。
