HTML 块级元素与行内元素

HTML 元素按默认显示行为分为两大类：块级元素和行内元素。

块级元素（Block）

块级元素会：

• 占满父容器的整个宽度
• 总是从新行开始
• 可以设置宽高（width、height）
• 上下有默认间距

常见块级元素：

<address> <article> <aside> <blockquote> <canvas> <div> <dl> <fieldset> <figcaption> <figure> <footer> <form> <h1> - <h6> <header> <hr> <li> <main> <nav> <ol> <p> <pre> <section> <table> <ul> <video>

行内元素（Inline）

行内元素会：

• 只占据内容自身需要的宽度
• 不会从新行开始（可以在一行内排列多个）
• 无法设置 width 和 height
• 只能设置水平方向的 margin 和 padding
• 上下 margin 和 padding 不影响布局（不会把其他行推开）

常见行内元素：

<a> <abbr> <b> <br> <button> <cite> <code> <em> <i> <img> <input> <kbd> <label> <select> <small> <span> <strong> <sub> <sup> <textarea>

嵌套规则

• 块级元素可以包含块级元素和行内元素
• 行内元素只能包含行内元素，不能包含块级元素

<!-- ✅ 正确：div(块) 包含 p(块) + span(行内) -->
<div>
  <p>段落文字</p>
  <span>行内文字</span>
</div>

<!-- ❌ 错误：span(行内) 不能包含 div(块) -->
<span>
  <div>这违反了嵌套规则</div>
</span>

<!-- ✅ 正确：a(行内) 包含 strong(行内) -->
<a href="#"><strong>点击这里</strong></a>