【入门级】HTML块级元素和行内元素的区别

一.块级元素

1.1块级元素的特点

• 块级元素在html中独占一行，因为块级元素的自动填充其父元素的宽度。
• 块级元素可设置宽高，并且还能设置内外边距(设置了宽高，块级元素也是独占一行)
• 块级元素可包容其他块级元素，也可包容行内元素。(但是有一些块级元素不能包含其他块级元素,比如:p元素中不能其他块级元素。)

1.2 哪些是块级元素

当然块级元素不止这些，我这里是指明一些。

• <p></p>
• <div></div>
• <h1></h1>
• <ul></ul>
• <li></li>

二.行内元素

2.1 行内元素的特点

• 行内元素不能设置宽高，但是设置外边距的话上下无效，左右有效，而内边距全部有效。
• 行内元素不能与其他行内元素可以处于同一行。
• 行内元素可以包含其他行内元素，但是不能包含块级元素。

2.2 行内元素有哪些

当然行内元素也不止这些，我这里是指明一些。

• <strong></strong>
• <span></span>
• <em></em>
• <label></label>

三. 块级元素与行内元素的区别

• 块级元素是独占一行，而行内元素是与其他行内元素可以处于同一行。

<p style="background-color:red;height: 50px"></p><!--块级元素，设置背景颜色为红色区分-->

<span style="background-color: green">12312</span><!--行内元素，设置背景颜色为绿色区分-->

<span style="background-color: orange">12312</span><!--行内元素，设置背景颜色为橙色区分-->

运行结果:

• 块级元素可以设置宽高，而行内元素不能设置宽高。

<p style="background-color:red;height: 50px;width: 100px"></p><!--块级元素，设置背景颜色为红色区分-->

<span style="background-color: green;height: 100px;width: 100px">2312312</span>
<!--行内元素，设置背景颜色为绿色区分-->

运行结果:

• 块级元素可以包含其他块级元素和行内元素，而行内元素只能包含其他行内元素。

<div style="background-color:red;height: 100px;width: 100px">
    <span style="background-color: orange">12312312</span><!---行内元素-->
    <p style="background-color: pink;width: 20px;height: 20px"></p><!--其他块级元素-->
</div><!--块级元素，设置背景颜色为红色区分-->

<span style="background-color: green;line-height: 100px"><strong>2312312</strong><!--其他行内元素-->
</span><!--行内元素，设置背景颜色为绿色区分-->

运行结果: