参考链接

MDN: 块级元素

MDN: 行内元素

彻底理解行内元素和块级元素，不必硬背

块级元素与行内元素

MDN: p 标签

块级元素与行内元素

块级元素

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

• 格式
  默认情况下，块级元素会新起一行。
• 内容模型
  一般块级元素可以包含行内元素和其他块级元素。

行内元素

一个行内元素只占据它对应标签的边框所包含的空间。

• 格式
  默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
• 内容模型
  一般情况下，行内元素只能包含数据和其他行内元素。

区别

• block是块级元素，能设置宽高，margin/padding都有效前后都有换行符
• inline设置宽高无效，margin在竖直方向无效，padding有效，前后无换行符
• inline-block可以设置宽高，margin/padding都有效，前后无换行符

1. 块级元素会独占一行，其宽度自动填满其父元素宽度
   行内元素不会独占一行，其宽度随元素的内容而变化
2. 块级元素可以设置宽高
   行内元素设置宽高无效
3. 块级元素可以设置内外边距
   行内元素水平方向的内外边距都产生边距效果，但是竖直方向的内外边距都不会产生边距效果。
   (padding 竖直方向不产生边距效果，但背景颜色存在，margin 则只有水平方向才有效)
4. 块级元素可以包含行内元素和块级元素
   行内元素不能包含块级元素

其他补充

常见

常见的块级元素
<div>    文档分区
<p>      段落
<form>   表单
<table>  表格
<ul>     无序列表
<ol>     有序列表
<h1-h6>  标题
<dd>     定义列表中定义条目描述。
<dl>     定义列表

常见的行内元素
<a>         锚点
<b>         字体加粗
<big>       大号字体
<br>        换行
<em>        强调内容
<i>         斜体文本
<img>       图像
<input>     输入框
<label>     标签为input的标注
<select>    单选或多选
<span>      组合文档的行内元素
<small>     小号字体
<strong>    强调内容
<textarea>  文本域

嵌套

• 行内元素中 a 链接内不能嵌套其他链接
• 块级元素中 p 标签中不能嵌套 div 标签，p 标签不能嵌套 p 标签
  （p 标签后跟 div 或 新的 p 标签，可省略 p 标签结束符）

<p>123
    <p>123</p>
</p>
------------------------
<p>
    <div>123</div>
</p>
------------------------
<p><div>123</div></p>

浏览器中显示👇(p 标签换行会产生空格)

<p>123 </p>
<p>123</p>
<p></p>
------------------------
<p> </p>
<div>123</div>
<p></p>
------------------------
<p></p>
<div>123</div>
<p></p>