行内元素与块级元素的区别

问题

行内元素和块级元素有什么区别？

解答

行内元素（Inline Elements）

行内元素在水平方向上以行内方式显示，不会独占一行。

特性：

• 宽度和高度由内容决定，无法设置固定宽高
• 只能容纳文本或其他行内元素，不能容纳块级元素
• 可以设置左右的 margin 和 padding，但上下 margin 和 padding 不起作用
• 常见元素：<span>、<a>、<strong>、<em>、<img> 等

<span>行内元素1</span>
<span>行内元素2</span>
<!-- 两个 span 会在同一行显示 -->

块级元素（Block-level Elements）

块级元素默认独占一行，即使宽度未填满父元素。

特性：

• 可以包含其他块级元素和行内元素
• 宽度、高度、内外边距都可以通过 CSS 设置
• 会自动在前后创建换行
• 常见元素：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table> 等

<div>块级元素1</div>
<div>块级元素2</div>
<!-- 两个 div 会各占一行 -->

通过 CSS 修改显示方式

可以使用 display 属性改变元素的显示类型：

/* 将行内元素变为块级元素 */
span {
  display: block;
}

/* 将块级元素变为行内元素 */
div {
  display: inline;
}

/* 行内块元素：既可以设置宽高，又不独占一行 */
span {
  display: inline-block;
}

关键点

• 行内元素不独占一行，块级元素独占一行
• 行内元素无法设置宽高，块级元素可以设置宽高
• 行内元素的上下 margin 和 padding 不生效
• 可以通过 display 属性改变元素的显示类型
• inline-block 结合了两者优点：可设置宽高且不独占一行