前言

HTML 中大部分元素都是块级（block）元素或行内（inline）元素。

可以通过 CSS 设置 display: block 将元素设置为块级元素，或设置 display: inline 将元素设置为行内元素。

块级元素

块级元素有以下特点：

• 至少独占一行。
• 可以设置宽高。
• 默认宽度为 100%（父元素宽度），默认高度为内容的高度。
• 块级元素可以包含块级元素或行内元素

我们给一个块级元素设置背景色可以看到它默认所占的区域，宽度占据了 100%。

<div style="background: pink">块级元素</div>

$$demo

<div style="background: pink">块级元素</div>

$$

常见的块级元素

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

行内元素

行内元素有以下特点：

• 可与其他行内元素共一行。
• 不能设置宽高。
• 默认宽度为内容的宽度，默认高度为内容的高度。
• 一般行内元素只能包含行内元素

我们给一个行内元素设置背景色可以看到它默认所占的区域，宽度为内容的宽度。

<span style="background: pink">行内元素</span>

$$demo

<span style="background: pink">行内元素</span>

$$

$$tip

<img> 、 <input> 、 <textarea> 、 <video> 、 <audio> 属于行内替换（inline-replaced）元素，因此可以设置宽高。

详情可以看 stackoverflow 上的讨论 Why <img> takes a height when it's an inline element 。

$$

常见的行内元素

span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u、video、audio