块级元素和行内元素的区别

块级元素和行内元素的区别

一、块级元素

<div>, <p>, <header>, <nav>, <h1>等等都是块级元素。它们都有以下特点：

1. 如果不为其设定宽度，会自动占满父容器的宽度。
2. 如果不为其设定高度，会自适应它的子元素的高度（前提是没有为其设定浮动或定位）。
3. 可以为其设定外边距和内边距。
4. 默认情况下会在垂直方向排列，即每个元素都会另起一行。
5. vertical-align属性对其不起作用。

二、行内元素

<span>, <i>, <em>, <strong>等都是行内元素。它们都有以下特点：

1. 不能为其设定width, height属性。
2. 垂直方向的外边距对它不起作用，水平方向的外边距和各个方向的内边距起作用。
3. 可为其设定white-space属性。
4. 默认情况下水平排布。
5. 可以为其设定vertical-align属性。