行内元素默认并排显示、宽度由内容决定且不可设宽高，块级元素独占一行、可设宽高并默认撑满父容器；通过CSS的display属性可改变元素显示类型，其中inline-block兼具行内排列与块级盒模型特性，是实现水平布局的重要手段。
在HTML的世界里，我们遇到的每一个元素，骨子里都带着自己的“脾气”——它们要么是行内元素，要么是块级元素。简单来说，行内元素就像是文字流中的一部分，它只占据自身内容所需的宽度，并且默认情况下，多个行内元素可以并排显示在同一行里。而块级元素则更像是一个独立的“盒子”，它会独占一行，并且会尽力扩展到父容器的全部宽度，即便它自身内容并不需要那么多空间。理解这个根本区别，是构建任何网页布局的基石，因为它直接决定了元素在页面上的排列方式和对空间的使用逻辑。
解决方案
要真正掌握HTML元素的布局，核心在于理解行内元素和块级元素的默认行为，以及如何通过CSS来改变这些行为。从本质上看，行内元素（如
、
、
）是内容驱动的，它们通常用于标记文本的一部分，不会引起新的行；你不能直接给它们设置宽度（
width
）和高度（
height
），它们的
margin
和
padding
也只在水平方向上有效，垂直方向上的
margin
和
padding
虽然会增加元素自身的尺寸，但不会影响周围元素的布局，有时甚至会发生重叠。
而块级元素（如
、
、
、
、
）则是结构驱动的，它们用于构建页面的主要骨架，每个块级元素都会从新的一行开始，并尽可能占据可用宽度。你可以自由地为块级元素设置
width、
height、
margin和
padding，这些属性都会按照预期影响元素的尺寸和与其他元素的距离。
在我看来，这种区分并非是为了给开发者添麻烦，而是提供了一种默认的、直观的布局逻辑。当我们开始写HTML时，就已经有了一个关于元素如何表现的基本预期。比如，你写一个标题，自然希望它独占一行，所以
是块级的；你给一段文字中的某个词加粗，不希望它把整个段落打断，所以
是行内的。这种设计哲学，让HTML在语义化的同时，也自带了一套基本的视觉呈现规则。
立即学习“前端免费学习笔记（深入）”；
为什么理解行内与块级元素对网页布局至关重要？
我觉得，这就像是盖房子前，你得先知道你手里的砖头是实心砖还是空心砖，它们各自能承受多少重量，以及如何堆砌才能稳固。在网页布局中，行内元素和块级元素的特性，直接决定了它们在页面上的“占位”和“互动”方式。如果你不清楚这一点，就很容易在布局时遇到各种奇怪的问题。
举个例子，很多初学者会疑惑为什么给一个
标签设置了
width: 200px;却没有任何效果，或者为什么两个
标签总是上下排列而不是并排。这些问题的根源，就在于对元素默认显示类型的混淆。块级元素天生就是“霸道”的，它要独占一行；行内元素则是“谦逊”的，它只求能与同伴共享空间。
更深层次地说，这种理解有助于我们更高效地使用CSS。比如，当你需要将一组导航链接水平排列时，如果你不明白
标签默认是行内元素，可能会费尽心思去浮动（
float）它们，或者使用复杂的定位。但如果你知道它的行内特性，你可能会想到用
display: block;或者
display: inline-block;来改变其行为，从而获得更灵活的控制，或者干脆直接用Flexbox或Grid这些现代布局方式，它们在处理块级元素的排列上更为强大。
所以，理解行内与块级元素，不仅仅是记住几个概念，更是掌握了一种思维模式：如何预判元素在页面上的表现，以及如何通过CSS去精准地调整这种表现，以达到我们理想的布局效果。这是从“写出能跑的代码”到“写出优雅且易于维护的代码”的关键一步。
常见的行内元素和块级元素有哪些，它们各自的特性是什么？
我们每天都在用的HTML标签，其实大部分都属于这两类。搞清楚它们各自的代表和特性，能大大减少布局时的困惑。
常见的块级元素：
: 最常用的通用容器，没有任何语义，纯粹为了布局而存在。
: 段落。
到
: 标题。
,
,
: 无序列表、有序列表及其列表项。
: 表单。
,
,
,
,
,
: HTML5新增的语义化结构元素，它们都是块级的。
块级元素的特性：
- 独占一行： 无论内容多少，都会从新的一行开始，并强制其后的内容也另起一行。
- 宽度自适应： 默认情况下，宽度会扩展到其父容器的100%。
- 可设置宽高： 可以通过CSS设置
width、
height属性。
- 盒模型完整：
margin、
padding、
border在四个方向上都有效，会影响元素的尺寸和位置。
- 可以包含行内元素和块级元素： 这是它们作为容器的根本属性。
常见的行内元素：
: 最常用的通用行内容器，没有任何语义，用于对文本进行局部样式修改。
: 超链接。
/
: 加粗 / 斜体（语义上强调）。
: 图像。
,
,
,