内联元素的width/height无效是因为其display: inline不参与块级盒模型，尺寸由内容、font-size和line-height决定；改用inline-block可启用完整盒模型并支持宽高设置，但需处理vertical-align对齐及html空白间隙问题。
内联元素的 width/height 设置为什么无效
因为内联元素不参与块级布局流，它的尺寸由内容自然决定，width 和 height 属性被浏览器忽略（替换元素如 <img>、<input> 是例外）。你写 width: 200px，它照样按文字宽度或图片固有尺寸渲染。
常见错误现象：给 <span></span> 设 height: 50px，发现完全没变化；或者设 width: 100%，结果还是只占几个字符宽。
- 真正控制“高度”的是父容器的
line-height和自身字体大小（font-size） - 真正控制“宽度”的是内容本身——中文字符按
em单位撑开，英文按字符宽度累加 - 想强制定宽高？改用
display: inline-block或display: inline-flex
padding/border/margin 的垂直方向属性到底起不起作用
它们“渲染可见”，但“不参与布局”——这是最易混淆的点。比如给 <span></span> 加 padding-top: 20px，你会看到顶部有空白、边框也画出来了，但它不会把上面一行文字顶上去，也不会增加行高。
原因在于：内联元素的垂直空间由所在行框（line box）统一分配，而行框高度取决于该行所有内联盒中“最高者”（含 line-height、vertical-align、替换元素尺寸等）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
padding-top/padding-bottom：背景和边框会显示，但不撑开行框 -
border-top/border-bottom：同上，视觉存在，布局无影响 -
margin-top/margin-bottom：完全无效，连视觉偏移都没有 - 只有
margin-left/margin-right和水平方向的padding/border会真实推开相邻内联元素
vertical-align 为什么是内联布局的关键开关
内联元素默认按基线（baseline）对齐，而基线位置受 font-size、line-height、甚至父元素 line-height 影响。一个 <span></span> 和一张 <img> 并排时错位，90% 是没显式设置 vertical-align。
-
vertical-align: baseline（默认）：对齐文字基线，图片底部常悬空 -
vertical-align: middle：元素中点对齐行框中线，更直观可控 -
vertical-align: top/bottom：对齐的是当前行框的顶部/底部，不是整个容器 - 注意：
vertical-align只对内联级元素生效（inline、inline-block、table-cell），对block元素无效
什么时候必须换用 inline-block
当你既要保持横向排列，又需要完整盒模型控制时，display: inline-block 是唯一标准解法。它不是“增强版 inline”，而是切换到另一个格式化上下文——内部是块级盒模型，外部仍嵌在行内流里。
- 可设
width/height，且真正生效 -
padding/border/margin四个方向全部参与布局 - 但要注意：它仍受
vertical-align影响，且 HTML 中的换行/空格会产生约 4px 空隙（需用font-size: 0或删空格解决） - 如果只是想让链接更容易点，
inline-block比强行套span+ 大padding更可靠
真正容易被忽略的是：内联元素的盒模型没有“bug”，它所有表现都严格符合 CSS 规范；所谓“奇怪”，往往是因为你把它当成了 mini-block 来用，却忘了它本质活在行内格式化上下文（IFC）里——line-height、vertical-align、匿名行框才是它的主控变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
