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

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

下载

图片底部空白源于 img 默认 inline 触发行内格式化上下文为 descender 预留空间，vertical-align: bottom 最稳因其让底边贴合行框底边；display: block 可彻底消除但破坏图文混排；空隙多来自父容器 margin/padding/line-height 或 html 空格。

图片底部多出几像素空白，不是 bug，是 img 默认 display: inline 触发行内格式化上下文（IFC）时为 descender 预留的空间——哪怕周围没文字，浏览器也照留。直接调 margin 或 padding 无效，得从排版逻辑入手。

vertical-align: bottom 为什么最常用也最稳

它让 img 底边贴住行框（line box）底边，绕过 baseline 对齐，空隙归零。保留 inline 特性，不破坏图文混排，兼容所有现代浏览器。

• vertical-align: middle 没参考系，换字体/字号就偏移，位置飘
• vertical-align: text-bottom 对齐文字内容区底部，比 bottom 高 1–2px，可能残留缝隙
• 父容器若设了 line-height: 2，空隙会被放大；此时单调 img 的 vertical-align 不管用，得同步控制父级行高或临时设 font-size: 0
• 一旦父容器是 display: flex 或 display: grid，vertical-align 直接被忽略（DevTools 里会标灰），此时空隙本就不存在

display: block 能彻底解决但代价明确

它让 img 退出行内格式化上下文，baseline 对齐逻辑失效，空隙立刻消失。但它不是万能解药，得看场景。

• ✅ 适合 banner、轮播图、Grid/Flex 项等“图片独占一行”或父容器已是布局容器的场景
• ❌ 不适合图标 + 文字按钮、<span></span> 内嵌小图——加了就换行，文字被挤到下一行
• ⚠️ 若父容器是 flex 或 grid，display: block 仍生效，但纯属冗余：这些布局天然不产生该空隙
• 加了还有缝？先查三处：<p></p> 自带 margin-bottom、<img> 标签后有 HTML 换行/空格（渲染为约 4px 空白符）、图片导出带透明底或画布留白（CSS 修不了）

真正容易被忽略的干扰源在父级盒模型里

开发者工具里看到“图片下面有空”，90% 不是 img 自己的问题，而是父元素在撑空间。

• <p></p>、<div> 这类元素自带 <code>margin-bottom 或 padding-bottom，误判成图片缝隙
• 父容器 line-height 过大，空隙高度 ≈ 0.25 × line-height；临时加 line-height: 0 可验证，但会影响内部文字
• 某些插件（如 Elementor）会为 #page 注入 min-height: 100vh，导致页面底部出现长空白区域，和图片无关
• 浮动塌陷、隐藏的 position: relative + 负 margin 元素，也可能撑高 ，造成“假性留白”

别只盯着 img 加样式，先打开 DevTools 查 computed styles，重点看父级的 margin、padding 和实际盒模型高度——空隙常藏在上一级，而不是图片本身。