block(块元素)、inline(内联元素)的差别

封面图 • 2026-01-08 • Html/Css

在 HTML 和 CSS 中，**块元素（block element）** 和 **内联元素（inline element）** 是两种基本的元素类型，它们在页面布局中有着不同的表现方式和用途。以下是它们的主要区别：

---

### 一、定义与默认行为

| 类型 | 默认行为 | 是否独占一行 | 是否可以设置宽高 | 是否可以包含其他块级元素 |
|------|-----------|----------------|------------------|--------------------------|
| **块元素（block）** | 独占一行 | ✅ 是 | ✅ 可以设置宽度和高度 | ✅ 可以包含其他块级元素 |
| **内联元素（inline）** | 不独占一行 | ❌ 否 | ❌ 通常不能设置宽度和高度 | ❌ 一般不能包含块级元素 |

---

### 二、常见元素举例

#### 块元素（Block Elements）：
- `<div>`：最常用的块级容器
- `<p>`：段落
- `<h1>` ~ `<h6>`：标题
- `<ul>`、`<ol>`、`<li>`：列表
- `<form>`：表单
- `<table>`：表格
- `<header>`、`<footer>`、`<section>`、`<article>` 等 HTML5 新增语义化标签

#### 内联元素（Inline Elements）：
- `<span>`：用于对文本进行样式控制
- `<a>`：超链接
- `<strong>`、`<em>`：强调文本
- `<img>`：图片
- `<input>`、`<button>`：表单控件（注意：有些如 `<input>` 是“行内块元素”，见下文）

---

### 三、CSS 中的 `display` 属性

可以通过 `display` 属性来改变元素的显示方式：

| 显示方式 | 说明 |
|----------|------|
| `display: block;` | 元素表现为块级元素 |
| `display: inline;` | 元素表现为内联元素 |
| `display: inline-block;` | 表现为“行内块元素”（既不独占一行，又可以设置宽高） |
| `display: none;` | 元素不可见（不渲染） |

> 📌 例如：`<img>` 默认是内联元素，但通过 `display: inline-block;` 可以让它像块元素一样控制宽高。

---

### 四、布局上的区别

| 特性 | 块元素 | 内联元素 |
|------|--------|----------|
| 自动换行 | ✅ 每个块元素都会单独占据一行 |
| 宽度和高度 | ✅ 可以设置 width/height |
| 垂直对齐 | ✅ 可以使用 vertical-align |
| 浮动效果 | ✅ 支持 float |
| 与其他元素的排列 | ✅ 会形成独立的布局区域 |
| 与其他内联元素一起显示 | ❌ 不能与其他内联元素并排显示（除非用 `white-space` 或 `inline-block` 调整） |

---

### 五、实际应用建议

- **使用块元素**：当需要让元素独占一行、进行整体布局时（如导航栏、文章内容等）。
- **使用内联元素**：当需要在文字中插入小部分样式或功能（如加粗、链接、图片等）。

---

### 六、示例代码

```html

<div style="width: 200px; height: 50px; background: lightblue;">
  这是一个块元素
</div>

<span style="color: red;">这是一个内联元素</span>
```

---

### 七、总结

| 特点 | 块元素 | 内联元素 |
|------|--------|----------|
| 是否独占一行 | 是 | 否 |
| 是否可以设置宽高 | 是 | 否 |
| 通常用于 | 布局、结构 | 文本样式、小功能 |
| 常见标签 | `<div>`, `<p>`, `<h1>` 等 | `<span>`, `<a>`, `<img>` 等 |

---

如果你有具体应用场景或想了解如何将某个元素设置为块级或内联，欢迎继续提问！