display: inline元素设width/height无效是css规范行为，因其不生成独立盒模型，尺寸由内容、font-size和line-height决定；改用inline-block可保留同行特性并启用完整盒模型，但需注意vertical-align对齐和html空白间隙问题。

为什么 display: inline 元素设 width 和 height 没反应

这不是浏览器 bug，是 CSS 规范明确定义的行为：span、a、strong 这类纯内联元素只参与「行框（line box）」布局，不生成独立盒模型。你写的 width、height、margin-top、margin-bottom 在开发者工具的 Computed 面板里通常被划掉——浏览器直接忽略它们。

它的“高度”实际由 font-size + line-height 共同决定；“宽度”完全由内容撑开。即使加了 padding-top，背景色也覆盖不到那块区域，更不会推挤邻近元素。

改用 display: inline-block 是最常用解法

它保留行内流位置（不换行、能和文字并排），同时启用完整盒模型：宽高、上下 margin、padding 全部生效，IE8+ 原生支持，无需 hack。

• 必须显式写 vertical-align: middle 或 top，否则默认 baseline 会导致和文字底部对不齐
• HTML 源码里的换行/缩进会被渲染为约 4px 空隙；解决方法：父容器设 font-size: 0，子元素再重设字体大小
• 若父容器 line-height 过小，inline-block 元素可能被截断；优先调大 line-height，而不是硬加 height
• img 这类替换元素设 inline-block 后，vertical-align 才真正可控

什么时候该用 display: block？

只有当你明确需要它独占一行时才选这个。比如标题中加粗短语要强制换行、操作按钮需脱离文本流单独控制高度间距。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

副作用很实在：

• 原本和文字并排的 span 会突然换行，打乱段落或导航栏结构
• 多个 block 元素垂直堆叠，若没设 margin 容易粘连
• 父容器若无其他块级内容，仍可能塌陷

别碰 float 或 position: absolute 来硬压宽高

它们虽能让宽高“看起来”生效，但代价太大：

• float 会脱离文档流，影响后续元素布局，还得手动清除浮动
• position: absolute 让元素完全脱离流，失去与周围文字/图标的自然对齐关系，响应式下极易错位
• 真正需要精确尺寸和位置时，应先考虑是否该换语义更合适的标签（比如用 button 替代 span）

真正麻烦的往往不是“怎么让宽高生效”，而是生效之后，它和周围文字、图片、行高之间的对齐关系突然变得不可预测——这些细节比改一个 display 值更消耗调试时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！