行内元素和块级元素

在 CSS 中，行内元素可以做的事情 ，而块级元素不能做的事情，主要体现在以下几个方面：

---

1️⃣ 行内元素可以在同一行排列

✅ 行内元素 默认不会换行，可以多个元素排列在一行。

❌ 块级元素 默认会独占一行，阻止其他元素在同一行显示。

示例

<p>我是一个段落 <span>这是一个行内元素</span> 在同一行</p>

✅ 结果：

👉 span 会和文本在 同一行，不会换行。

❌ 如果使用块级元素

<p>我是一个段落 <div>我是块级元素</div> 这里</p>

🚨 div 会换行，因为块级元素 独占一行。

💡 结论： 只有行内元素可以自然排列在同一行，块级元素不能。

---

2️⃣ 行内元素可以在文本内部使用

✅ 行内元素 可以放入 段落、标题等文本元素 内部。

❌ 块级元素 不能 直接放入段落或标题内，否则会破坏 HTML 语义结构。

示例

<p>欢迎来到 <a href="#">我的网站</a>，希望你喜欢。</p>

✅ a（超链接）是行内元素，可以嵌套在 p 内，不会破坏结构。

🚨 错误示例

<p>欢迎来到 <div>我的网站</div>，希望你喜欢。</p>

❌ div 是块级元素，不能放在 p 里，会导致 HTML 结构错误。

💡 结论： 行内元素能在文本内部使用，块级元素不能。

---

3️⃣ 行内元素可以被 vertical-align 调整

✅ 行内元素 支持 vertical-align，可以用 baseline、middle、top、bottom 对齐。

❌ 块级元素 不受 vertical-align 影响，因为它们默认占满一整行。

示例

.inline {
  vertical-align: middle;
}

文本 <img src="logo.png" class="inline" alt="logo"> 继续

✅ img 是行内元素，可以调整 垂直对齐方式，让它和文本对齐。

💡 结论： vertical-align 仅适用于行内元素，块级元素无法使用。

---

4️⃣ 行内元素可以被 letter-spacing 和 word-spacing 影响

✅ 行内元素 之间的间距可以通过 letter-spacing 和 word-spacing 控制。

❌ 块级元素 之间的间距 不受 letter-spacing 和 word-spacing 影响 ，只能用 margin 调整。

示例

.inline {
  letter-spacing: 5px;
  word-spacing: 10px;
}

<span class="inline">Hello World</span>

✅ Hello World 的字母间距和单词间距可以被控制。

💡 结论： letter-spacing 和 word-spacing 主要作用于 行内元素，对块级元素无效。

---

5️⃣ 行内元素可以使用 white-space: nowrap; 防止换行

✅ 行内元素 允许使用 white-space: nowrap;，防止换行。

❌ 块级元素 不能直接通过 white-space: nowrap; 控制整个容器的换行行为。

示例

.inline {
  white-space: nowrap;
}

<span class="inline">这是一段很长的文字，但是不会换行</span>

✅ span 会一直保持在 同一行，不会被自动换行。

💡 结论： white-space: nowrap; 主要用于行内元素，让文本保持在一行。

---

总结

CSS 属性	行内元素	块级元素	备注
同行排列	✅ 支持	❌ 不支持	块级元素独占整行
嵌套在文本内部	✅ 支持	❌ 不能	块级元素不能放入 p 之类的文本元素内
vertical-align	✅ 可用	❌ 无效	用于调整行内元素的垂直对齐方式
letter-spacing 和 word-spacing	✅ 可用	❌ 无效	用于控制文本间距
white-space: nowrap;	✅ 可用	⚠️ 需 display: inline-block;	阻止文本自动换行

💡 最佳实践：

• 调整文本 用 行内元素 （span、strong）。
• 调整布局 用 块级元素 （div、section）。
• 让行内元素换行 ：可以 display: block;。
• 让块级元素不换行 ：可以 display: inline-block;。