HTML块和内联元素

每个 HTML 元素都有一个默认显示值，具体取决于它是什么类型的元素。

有两种显示值：块和内联。

块级元素

块级元素总是从新行开始，浏览器会自动在元素前后添加一些空格（边距）。

块级元素总是占据可用的全部宽度（尽可能向左和向右伸展）。

两个常用的块元素是：<p> 和<div>。

示例

<p>Hello World</p>
<div>Hello World</div>尝试一下一键复制

以下是 HTML 中的块级元素：

示例

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>一键复制

内联元素

内联元素不会从新行开始。内联元素只占用必要的宽度。<span>是最长用的内联元素。

示例

<span>Hello World</span>尝试一下一键复制

以下元素为内联元素

示例

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>一键复制

注意：内联元素不能包含块级元素！

修改元素显示未内联或者块元素

借助CSS display属性我们可以设置容易元素为内联或者块。

示例

<span style="display:block">Hello World</span>
<div style="display:inline">Hello World</div>

<span >Hello World</span>
<div>Hello World</div>尝试一下一键复制