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

行内元素(内联元素)

• 一个行内元素只占据它对应标签的边框所包含的空间
• 一般情况下，行内元素只能包含数据和其他行内元素。
• 默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
• 下面的元素都是行内元素：

b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea

块级元素

• 块级元素占据其父元素（容器）的整个空间。
• 通常浏览器会在块级元素前后另起一个新行。
• 块级元素只能出现在 <body> 元素内。
• 一般块级元素可以包含行内元素和其他块级元素。

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, tfoot, ul, video,

示例

::: demo [vanilla]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      这是块级元素 div 其中包含行内元素 span
      <span style="background-color: lightblue">这是 span 元素1</span>
      <p>这是 p 元素1</p>
      <span style="background-color: lightblue">
        这是 span 元素2
        <span>这是 span 元素3</span>
      </span>
      <span style="background-color: lightblue">这是 span 元素4</span>
      <p>这是 p 元素2</p>
    </div>
  </body>
</html>

{
  "show": true
}

:::