HTML 元素分类 | TryCoding.Fun

HTML 元素分类

行内元素、块级元素、空元素的区别与常见标签

问题

行内元素、块级元素、空(void)元素有哪些及其区别？

解答

块级元素

独占一行，可设置宽高、内外边距。

常见标签：

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>, <article>, <nav>, <aside>

行内元素

不独占一行，宽高由内容决定，设置宽高无效。

常见标签：

<span>, <a>, <strong>, <em>, <i>, <b>, <label>, <code>, <br>, <sub>, <sup>

空(void)元素

没有内容，不需要闭合标签。

常见标签：

<br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>

代码示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .block { background: lightblue; margin: 5px 0; }
    .inline { background: lightgreen; }
    /* 尝试给行内元素设置宽高 */
    .inline-size { width: 200px; height: 100px; }
  </style>
</head>
<body>
  <!-- 块级元素：独占一行 -->
  <div class="c9s3v">块级元素 div</div>
  <p class="c9s3v">块级元素 p</p>

  <!-- 行内元素：不换行，宽高设置无效 -->
  <span class="pqk4u">行内元素 span</span>
  <a class="pqk4u" href="#">行内元素 a</a>
  <span class="pqk4u inline-size">设置宽高无效</span>

  <!-- 空元素：无闭合标签 -->
  <br>
  <img src="image.png" alt="空元素 img">
  <input type="text" placeholder="空元素 input">
</body>
</html>

行内元素与块级元素转换

/* 行内转块级 */
span { display: block; }

/* 块级转行内 */
div { display: inline; }

/* 行内块：兼具两者特点 */
span { display: inline-block; }

行内块元素

inline-block 既不独占一行，又可以设置宽高。

常见的默认行内块元素：

<img>, <input>, <button>, <textarea>, <select>

关键点

块级元素独占一行，可设置宽高；行内元素不换行，宽高由内容决定
块级元素可包含行内元素和块级元素；行内元素一般只包含行内元素
空元素没有内容和闭合标签，如 <img>、<input>、<br>
使用 display 属性可以相互转换：block、inline、inline-block
inline-block 结合了两者优点：不换行且可设置宽高