网页排版布局底层：HTML文档结构中的块级与行内元素-html教程-PHP中文网

块级元素默认独占一行且可设宽高，行内元素不换行且宽高由内容决定；本质区别在于浏览器对盒模型的处理方式，而非元素“大小”。

网页排版布局底层：html文档结构中的块级与行内元素

块级元素默认会独占一行，行内元素不会

这是最常被误解的起点：不是“块级元素长得大”，而是浏览器渲染时对它们的盒模型处理方式不同。div、p、h1 默认 display: block，意味着它会自动换行、撑满父容器宽度、可设宽高和上下 margin；而 span、a、strong 默认 display: inline，它们不换行、无视 width/height 设置、上下 margin 和 padding 不影响布局流（只影响自身内容区域）。

常见错误现象：span 里加了 margin-top: 20px 却没效果；div 套在 a 里后，链接点击区域变小——其实是 a 默认是行内元素，无法直接容纳块级子元素（HTML5 允许但需注意语义和渲染行为）。

检查元素实际 display 值，用浏览器开发者工具看 computed 样式，别只信标签名
想让行内元素响应宽高设置？改 display: inline-block 或 display: inline-flex
想让块级元素并排？要么改 display: inline（失去宽高控制），要么用 float（已过时），更推荐 display: flex 或 display: grid

哪些元素天生是块级或行内？HTML 规范有明确分类

不能靠“感觉”判断。W3C HTML5 规范对每个元素定义了默认 display 值。比如 button 是 inline-block（可设宽高，又不换行），img 是 inline（但自带基线对齐，常导致下方留白），li 是 block（所以列表项默认垂直堆叠）。

容易踩的坑：input 类型不同，display 表现也不同——<input type="text"> 是 inline，<input type="hidden"> 不渲染，<input type="button"> 是 inline-block；br 是纯换行符，不是块级元素，也不接受任何样式。

查权威参考：MDN 的每个 HTML 元素页面底部都有 “CSS 属性” 一栏，标明默认 display
不要给 label 强设 display: block 后再套 input，容易破坏可访问性（屏幕阅读器可能跳过）
table、tr、td 等表格相关元素有自己专属 display 值（如 table-cell），不能简单归为块/行内

display: inline-block 是最常被低估的过渡方案

它保留了行内元素的“不换行”特性，又获得块级元素的“可设宽高、上下 margin、padding 完全生效”能力。比浮动更可控，比 flex 更轻量，适合按钮组、导航菜单项、图标文字混排等场景。

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

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

下载

但有两个硬伤必须手动处理：vertical-align 默认是 baseline，导致相邻 inline-block 元素底部不对齐；元素间空格（换行符、制表符）会被渲染成一个空白字符，造成意外间隙。

解决对齐：统一设 vertical-align: top 或 middle，别依赖默认值
消除间隙：把 HTML 中的换行删掉（<div></div> <div></div>），或父容器设 font-size: 0 再重置子元素 font-size，或用注释  消除空白
兼容性：IE8+ 支持，无需 polyfill；但 IE8 下 inline-block 对原生行内元素（如 span）需要触发 hasLayout（加 zoom: 1）