块级元素和行内元素的区别
这篇文章总结一下块级元素和行内元素的区别,有落下的随时补充。
一、块级元素
<div>, <p>, <header>, <nav>, <h1>等等都是块级元素。它们都有以下特点:
- 如果不为其设定宽度,会自动占满父容器的宽度。
- 如果不为其设定高度,会自适应它的子元素的高度(前提是没有为其设定浮动或定位)。
- 可以为其设定外边距和内边距。
- 默认情况下会在垂直方向排列,即每个元素都会另起一行。
- vertical-align属性对其不起作用。
二、行内元素
<span>, <i>, <em>, <strong>等都是行内元素。它们都有以下特点:
- 不能为其设定width, height属性。
- 垂直方向的外边距对它不起作用,水平方向的外边距和各个方向的内边距起作用。
- 可为其设定white-space属性。
- 默认情况下水平排布。
- 可以为其设定vertical-align属性。