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

这篇文章总结一下块级元素和行内元素的区别，有落下的随时补充。

一、块级元素

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

如果不为其设定宽度，会自动占满父容器的宽度。

如果不为其设定高度，会自适应它的子元素的高度（前提是没有为其设定浮动或定位）。

可以为其设定外边距和内边距。

默认情况下会在垂直方向排列，即每个元素都会另起一行。

vertical-align属性对其不起作用。

二、行内元素

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

不能为其设定width, height属性。

垂直方向的外边距对它不起作用，水平方向的外边距和各个方向的内边距起作用。

可为其设定white-space属性。

默认情况下水平排布。

可以为其设定vertical-align属性。