块级元素独占一行，可设宽高和边距，常见如div、p；行内元素并排显示，宽高由内容决定，margin上下无效；行内块元素兼具二者特性，可同行排列且支持宽高和完整边距，常用于导航布局。
HTML中的元素分为行内元素、块级元素和行内块级元素，它们在页面布局中表现不同，理解它们的格式化行为对排版至关重要。
块级元素的格式化特点
块级元素默认独占一行，会从新行开始，并尽可能撑满父容器的宽度。常见块级元素有：div、p、h1~h6、ul、li、ol等。
块级元素可以设置宽度、高度、内外边距和边框，这些样式都会正常生效。它们可以包含其他块级元素或行内元素（除非有特殊限制）。
- 自动换行，前后有“回车”效果
- 支持设置width和height
- 默认宽度为父元素的100%
- 可通过text-align控制内部行内内容的对齐
行内元素的格式化特点
行内元素不会独占一行，多个行内元素可以在同一行显示，直到空间不足才换行。常见行内元素有：span、a、strong、em、img、input等。
立即学习“前端免费学习笔记（深入）”；
行内元素的宽高由内容决定，设置width和height无效。外边距margin仅左右有效，上下无效；内边距padding虽然可以设置，但不会影响周围行内元素的垂直布局。
老式古典悬挂时钟矢量素材
下载
老式古典悬挂时钟矢量素材适用于室内装饰设计、复古风格品牌标识、历史主题展览的视觉元素、古典风格网站和移动应用界面、印刷品如书籍封面、杂志和宣传册、包装设计特别是奢侈品或高端产品的包装、时尚和服装行业的图案设计、教育和文化机构的宣传材料、古董或收藏品等相关设计的AI格式素材。
- 不独占行，与其他行内元素并排显示
- 宽高由内容撑开
- margin-top/margin-bottom无效
- 不能直接设置宽高，但可配合line-height调整视觉高度
行内块级元素（inline-block）的格式化特点
通过CSS设置display: inline-block，可以让元素既有行内元素的排列特性，又具备块级元素的样式控制能力。
这类元素不会独占整行，能和其他行内或inline-block元素在同一行显示，同时允许设置宽高、内外边距等。
- 同行内元素一样并排显示
- 可设置width、height
- 支持完整的margin和padding
- 常用于导航菜单、图标布局等场景
实际排版中的处理技巧
在实际开发中，经常需要调整元素的默认格式化行为来实现设计效果。
- 使用display: block将行内元素转为块级，便于控制尺寸
- 使用display: inline-block实现横向排列且可设大小的布局
- 注意inline-block元素间的空白间隙，可用font-size: 0或注释消除
- 灵活使用vertical-align控制行内或inline-block元素的垂直对齐方式
基本上就这些。掌握不同元素的格式化规则，能更精准地控制网页排版结构。不复杂但容易忽略细节。
