html中的如何使两张图片中间没有距离

图片默认有空白间隙是因为其为inline元素并按基线对齐，受line-height影响产生约4px间隙；解决方法包括设display:block、vertical-align、父容器font-size:0、flex布局或删除HTML空白符。 图片默认有空白间隙是因为行内元素特性 HTML 中 默认是 元素，会像文字一样对齐基线（baseline），下方自动留出约 4px 空隙——这不是 margin 或 padding，而是字体行高（line-height）导致的“看不见的底座”。哪怕你把 和 都设为 0，间隙还在。 常见错误现象： 在页面上总有一条细缝，inspect 元素发现父容器里图片底部有空白 最直接的解法是改 display：把 设为 或 并配 如果图片必须保持 inline 行为（比如混排文字），用 通常比 更稳，因为 baseline 对齐在不同字体下表现不一致 父容器 font-size 为 0 是个有效但要小心的技巧 由于 inline 元素间的空白来自 HTML 换行/空格被渲染成字符，而字符大小取决于父容器的 ，所以把父容器 能“消灭”这个间隙。但副作用明显：子元素若继承该设置，文字就看不到了。 适用场景：纯图片横向排列，且父容器不包含其他需显示文字的内容 正确写法是先设父容器 ，再给图片单独设回正常字号（如果图片含文字或伪元素）；更稳妥的是只给图片设 ，但图片本身不用字号，所以实际只需重置父容器 + 子元素不继承即可 兼容性没问题，但容易漏掉恢复子文字的 ，尤其用 CSS-in-JS 或组件嵌套时 flex 布局是最现代也最省心的方案 用 把图片父容器变成弹性盒子，间隙问题天然消失——因为 flex item 默认不参与 inline 布局，也不受 white-space 影响。 只需三行 CSS： 、 （显式声明无间隙）、 （防换行） 注意旧版 Safari 对 支持弱，可加 兜底，但仅当最后一个图片不需要右间距时才安全 如果图片需要响应式等比缩放，flex 本身不控制尺寸，得额外加 和 到 别忽略 HTML 源码里的换行符本身 即使 CSS 全部写对，如果写成： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 这两行之间的换行和缩进，在 inline 模式下就是真实存在的空白字符。浏览器会把它当一个空格渲染，宽度≈半个中文字符。 解决方法之一是删掉源码中 img 标签之间的所有空白（包括换行），写成一行： —— 可读性差，但有效 更实用的是用注释“吃掉”空白： ，或者用构建工具（如 PostHTML）自动压缩 HTML 这点常被忽略，尤其在模板字符串或 JSX 中拼接图片时， 如果没做 ，也可能带入逗号或换行 图片之间有没有距离，本质不是“怎么去掉 margin”，而是“怎么绕过 inline 元素的渲染规则”。越早意识到这点，越不容易在 上反复试错。