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结合了两者优点：不换行且可设置宽高
目录