绝大多数布局问题源于未理解元素默认display类型：div、p、h1~h6、ul、li、section默认block；span、a、strong、em、img、input默认inline；inline元素不支持宽高及上下边距，需改用inline-block或block；语义与显示需统一，避免可访问性与结构问题。
绝大多数布局问题，根源在于没搞清元素默认的 display 类型 —— 不是写错了 CSS，而是没意识到 浏览器对每个 HTML 元素都预设了 把 真正该纠结的不是“怎么让它看起来像我想的”，而是“它本来该是什么”——语义正确了，样式才好收敛，维护成本才低。<div> 和 <code><span></span> 天然行为完全不同。
哪些元素默认是 block-level，哪些是 inline
display 值，不是你写了才生效，而是“不写就按这个来”。比如：<div>、<code><p></p>、<h1></h1>～<h6></h6>、<ul></ul>、<li>、<section></section> 默认是 display: block
<span></span>、@#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@1 → 单纯 display: inline 无法设左右 padding；设 block 又全掉下行；inline-block 刚好display: inline-block 对原生 inline 元素（如 <span></span>），得补 *display: inline; *zoom: 1 触发 hasLayoutinline-block 元素间若有 HTML 换行或空格，会被渲染为 4px 左右空白 —— 解决方案要么删空格（<a></a><a></a> 连写），要么父容器设 font-size: 0 再重置子元素字号别依赖 display 转换来掩盖语义混乱
<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 强制改成 display: inline，或把 <span></span> 改成 display: block，技术上可行，但容易埋坑：
<p></p> 是块级语义，表示一个段落；强行 inline 后，屏幕阅读器仍按段落播报，但视觉上挤在一行，可访问性受损<span></span> 是无语义内联容器；若用来包裹整块表单区域并设 display: block，不如直接用 <div> 更清晰
<li>某些元素有硬性约束：比如 <code><p></p> 不能包含 <div>，哪怕你把 <code><div> 设成 <code>inline，HTML 结构仍是非法的（解析时会被浏览器自动修正）
