Ceryn

CSS 内联元素与块级元素

6分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS display 属性

display | MDN

引入

网页中的元素不是随便排列的。

有些元素默认会独占一行，有些元素会和其他内容显示在同一行，这就和块级元素、内联元素有关。

正文

定义

定义

块级元素通常会独占一行，内联元素通常会和其他内容显示在同一行。CSS 可以通过 display 属性控制元素的显示类型。

在 HTML 中，很多元素都有浏览器默认样式。

例如 <div> 默认是块级表现，<span> 默认是内联表现。

CSS 中常用 display 来改变元素的显示方式。

语法

选择器 {
  display: 值;
}

常见值：

.box {
  display: block;
}
 
.text {
  display: inline;
}
 
.button {
  display: inline-block;
}

块级元素

块级元素的特点是默认会独占一行。

<div>第一个 div</div>
<div>第二个 div</div>
div {
  background-color: #e5e7eb;
}

页面中两个 <div> 通常会分别显示在两行。

常见块级元素：

  • <div>
  • <p>
  • <h1> 到 <h6>
  • <ul>
  • <ol>
  • <li>
  • <section>
  • <article>
  • <header>
  • <footer>

块级元素通常可以设置：

  • width
  • height
  • margin
  • padding
  • border

内联元素

内联元素的特点是默认会和其他内容显示在同一行。

<span>文字一</span>
<span>文字二</span>
<a href="#">链接</a>

这些内容通常会排在同一行。

常见内联元素：

  • <span>
  • <a>
  • <strong>
  • <em>
  • <label>
  • <img>

内联元素适合包住一小段文字或内容，例如给某段文字单独设置颜色。

<p>这是一段 <span class="highlight">重点文字</span>。</p>
.highlight {
  color: red;
}

inline 的特点

display: inline; 表示元素以内联方式显示。

.item {
  display: inline;
}

它的主要特点：

  • 不会独占一行
  • 会和前后内容排在同一行
  • 设置 width 和 height 通常不会生效
  • 水平方向的 margin、padding 比较正常
  • 垂直方向的空间控制不如块级元素直观

block 的特点

display: block; 表示元素以块级方式显示。

a {
  display: block;
}

这个例子会让 <a> 从内联表现变成块级表现。

它的主要特点：

  • 会独占一行
  • 默认宽度通常会占满父元素
  • 可以设置 width 和 height
  • 可以比较完整地控制 margin、padding、border

inline-block 的特点

inline-block 可以理解为结合了 inline 和 block 的特点。

.tag {
  display: inline-block;
  width: 80px;
  height: 32px;
  background-color: #dbeafe;
}

它的主要特点：

  • 可以和其他元素显示在同一行
  • 可以设置 width 和 height
  • 可以控制 margin、padding、border
  • 常用于按钮、标签、小卡片等组件

inline 和 inline-block 的关键区别在于：inline 元素通常无法控制宽高，而 inline-block 可以控制尺寸，同时又能保持在同一行显示。

对照表

类型是否独占一行能否设置宽高常见元素
block是可以<div>、<p>、<section>
inline否通常不可以<span>、<a>、<strong>
inline-block否可以常用于按钮、标签

例子

把链接变成块级元素

<a class="nav-link" href="#">首页</a>
<a class="nav-link" href="#">文章</a>
.nav-link {
  display: block;
  padding: 12px;
  background-color: #f3f4f6;
}

这样每个链接都会独占一行，常用于侧边栏导航。

把链接做成按钮

<a class="btn" href="#">查看详情</a>
.btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #2563eb;
  color: white;
}

这里使用 inline-block，链接既可以像文字一样排在一行，又可以像盒子一样设置内边距和尺寸。

特点

  • 块级元素通常会独占一行
  • 内联元素通常会显示在同一行
  • display: block; 可以让元素变成块级表现
  • display: inline; 可以让元素变成内联表现
  • display: inline-block; 可以在同一行显示，同时控制宽高
  • <img> 虽然常被归为内联元素，但它可以设置宽高，表现比较特殊
  • 元素的默认显示方式可以被 CSS 改变

注意事项

  • 不要只根据标签名死记，要关注它实际的 display 表现
  • 内联元素不适合包裹大块结构内容
  • 如果需要设置宽高，优先考虑 block 或 inline-block
  • inline-block 元素之间可能会出现空隙，这是 HTML 中换行或空格造成的
  • 现代布局中，复杂排列通常会继续使用 CSS Flexbox 或 CSS Grid

理解

可以把块级元素理解为“一整行的盒子”，它通常从新的一行开始。

可以把内联元素理解为“文字流中的一小段”，它会跟着文字一起排。

inline-block 更像是“能排在文字行里的小盒子”，既不独占一行，又能设置宽高。

理解这三个显示方式后，再看按钮、导航、标签、卡片这些样式会更容易。

引出

理解了内联元素和块级元素之后，可以继续学习 CSS 盒模型，因为元素的宽高、边距和边框都和盒子模型有关。

关系图谱

反向链接