如图所示,只有块级标签宽高改变了,内联标签不改变。由此可得,块级标签设置宽高有效,内联标签设置宽高无效。
3.多个标签同时存在
<body>
<!-- 块级标签-->
<p>故事和酒,淘宝都有</p>
<p>故事和酒,淘宝都有</p>
<!--内联标签-->
<span>故事和酒,淘宝都有22</span>
<span>故事和酒,淘宝都有22</span>
</body>
多个块级标签同时存在的情况下,排列方式从上往下
多个内联标签同时存在的情况下,排列方式从左往右
4.是否包含
<body>
<!-- 块级标签-->
<p>故事和酒,淘宝都有
<span>故事和酒,淘宝都有22</span>
</p>
<!--内联标签-->
<span>故事和酒,淘宝都有22
<p>故事和酒,淘宝都有</p>
</span>
</body>
由此可知,块级标签可以包含内联标签,但内联标签不可以包含块级标签,只可以包含内联标签。
5.块级标签与内联标签相互转换
(1)块级转内联
<body>
<!--将块级标签转化成内联标签-->
<p style="display: inline">故事和酒,淘宝都有</p>
<p style="display: inline">故事和酒,淘宝都有</p>
</body>