img、input、button、select、textarea 默认 display: inline-block，故可设宽高和内外边距且同行排列；它们是替换元素，非纯行内，因浏览器默认赋予 inline-block 行为而非 inline。
img、input、button、select、textarea 是最常遇到的行内块元素，它们默认就带 display: inline-block 行为，不用额外写 CSS 就能设宽高、内外边距，还能和其他行内元素排在同一行。
为什么 img 和 input 算行内块，不是纯行内？
虽然 HTML 规范把 img 和 input 归类为“替换元素（replaced element）”，但浏览器默认给它们的 display 值是 inline-block（不是 inline）。这意味着：
- 它们可以设
width、height、padding、margin，而且全部生效 - 多个
img并排时，会像文字一样同行显示，但彼此间有空隙（由换行符/空白符引起） - 它们不能直接用
vertical-align: middle对齐文字——得显式设置，否则基线对齐容易错位
button 和 select 的实际表现差异
不同浏览器对这些元素的默认 line-height 和 vertical-align 处理不一致，尤其在和文字混排时：
-
button在 Chrome/Firefox 中默认vertical-align: middle，但 Safari 有时是baseline -
select的下拉箭头高度不统一，设固定height后可能裁剪或留白 - 如果要严格对齐，建议统一加
vertical-align: top或middle，并配合font-size: 0父容器清空空白间隙
别把 span 当成行内块——除非你改了 display
span 默认是 display: inline，设 width 或 height 完全无效。常见错误是：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写
<span style="width:100px;height:20px">xxx</span>，结果宽高不起作用 - 想让几个
span并排且等宽，却没加display: inline-block - 加了
inline-block后发现元素间有 4px 左右间隙——那是 HTML 换行符被当空格渲染导致的
真正需要可控尺寸又保持同行，就老老实实写 display: inline-block，或者用 Flex 布局替代。
行内块元素的“缝隙”问题怎么处理
多个 img 或 button 并排时，HTML 源码里的换行/缩进会变成空格，导致约 4px 间隙。解决方法有限且需按场景选：
- 删 HTML 换行：把
<img><img><img>写成一行（可读性差，维护难） - 父容器设
font-size: 0，子元素再设正常font-size（注意子元素若含文字需重置） - 用
float: left+ 清除浮动（过时，仅兼容旧项目） - 更推荐：直接上
display: flex，间隙可控、语义清晰、无需 hack
行内块看着简单，但一旦涉及对齐、间隙、跨浏览器一致性，就很容易掉坑里——多数时候，它只是过渡方案，不是布局终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
