HTML 内联和块级元素

提示

1. HTML元素分类：HTML元素分为行内元素（如<span>、<a>）和块级元素（如<p>、<div>），区别在于布局和占据空间的方式。
2. 行内元素特性：行内元素不会新起一行，只占据内容所需的宽度，常用于小范围文本格式化和链接。
3. 块级元素特性：块级元素会新起一行，占据容器的整个宽度，适用于大范围的布局和内容分组。

HTML 元素大致可以分为以下两类：

• 行内元素：<span>、<a>、<strong>、<img> 等。
• 块级元素：<p>、<div>、<h1>、<figure> 等。

HTML 行内元素

行内元素显示在同一行上。它们不会在新行开始，并且只占据其内容所需的宽度。行内元素的一个例子是 <span> 标签。

<p>这是 <span style="border: 1px solid black">span</span> 的工作方式。</p>

浏览器输出

如果我们有多个 span 标签，它们会被放置在同一行上。例如，

<p>
  以下的 spans 将是行内的；
  <span style="border: 1px solid black">Span 1</span> 和
  <span style="border: 1px solid black">Span 2</span>。
</p>

浏览器输出

一些行内元素的例子包括：

• HTML <a> 标签
• HTML <input> 标签
• HTML <span> 标签

大多数 HTML 格式化标签也是行内的。例如：

• HTML <b> 标签
• HTML <em> 标签
• HTML <strong> 标签 等

HTML 块级元素

块级元素占据其容器中可用的整个水平空间。它们在新行开始，并占据其内容所需的高度。

一个块级元素的例子是 HTML 段落标签。

<p style="border: 1px solid black">这是块级元素的工作方式。</p>

浏览器输出

如果我们有多个块级元素，它们将各自占据一行。例如，

<p style="border: 1px solid black">段落是</p>
<p style="border: 1px solid black">块级元素。</p>

浏览器输出

一些常用的块级元素包括：

• HTML <div> 标签
• HTML 标题 <h1> - <h6>
• HTML <p> 标签 等

CSS 与 HTML 行内和块级元素

行内元素中的高度和宽度

CSS 属性 height 和 width 对行内元素没有影响。

<p>
  以下 span 是一个
  <span style="border: 1px solid black">行内元素。</span>
</p>
<style>
  span {
    height: 200px; /* 对元素无效果 */
    width: 200px; /* 对元素无效果 */
  }
</style>

浏览器输出

行内元素的外边距

行内元素不具有上下外边距，它们只遵守左右外边距。

<div><span>1</span><span>2</span></div>
<div><span>3</span><span>4</span></div>
<style>
  span {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid black;
  }
</style>

浏览器输出

行内元素的内边距

行内元素在所有方向上都遵守内边距。

<p><span>这是一个 span</span></p>
<style>
  span {
    padding: 10px;
    border: 1px solid black;
  }
</style>

浏览器输出

块级元素中的高度和宽度

块级元素遵守 height 和 width 属性。我们可以使用 CSS 更改块级元素的高度和宽度。

<p style="border: 1px solid black;">这段文字是一个块级元素。</p>
<style>
  p {
    height: 200px; /* 这是有效的 */
    width: 200px; /* 这是有效的 */
  }
</style>

浏览器输出

带有父容器的块级元素

即使我们将块级元素的宽度设置为更小的尺寸，块级元素也会占据父容器的整个宽度。因此，没有 CSS，我们无法在同一行中拥有一个块级元素与另一个元素。例如，

<p style="width: 20px; border: 1px solid black;background-color: lightblue">
  1
</p>
<p style="width: 20px; border: 1px solid black; background-color: lightblue">
  2
</p>

浏览器输出

块级元素中的外边距和内边距

块级元素也遵守上下外边距和内边距方向。例如，

<div>块</div>
<div>块</div>
<style>
  div {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
  }
</style>

浏览器输出