浅谈块级元素与行内元素

定义

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
一个行内元素只占据它对应标签的边框所包含的空间。

常见块级、行内元素

块级元素：div、h1~h6、p、hr、form、ul、dl、ol、li、dd、dt、pre、table、th、td
行内元素： em、span、strong、a、br、img、button、input、label、select、textarea、code、script
注：HTML中元素并非只有块级元素和行内元素两种，还有可变元素。
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
如：applet - java applet、del - 删除文本、 iframe - inline frame、ins - 插入的文本、map - 图片区块(map)、object - object对象

---

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

1.块级可以包含块级和行内，行内只能包含文本和行内。

区别

在上图中，1个块级元素（div）下可以包含块级元素p及行内元素span，第2个span标签（行内元素）中包含块级元素div，但页面上的div标签却重新另起一行，说明行内元素只能包含文本和行内元素，不能包含块级元素。
2.块级元素占据一整行，行内元素占据自身宽度空间。

区别

上图中，通过添加border，p标签的块级元素，占据完整的一行，span行内元素仅占据自身宽度空间。
3.块级元素可设置margin、padding，行内元素只有margin、padding在左右方向（x轴）上有效

区别

在上图中，块级元素（p）设置均有效，而行内元素span的margin和padding值有效，虽然span元素边界增大，但对元素的周围内容无影响。
4.块级元素可设宽高，行内元素设宽高无变化

区别

在上图中，块级元素div宽高可设，行内元素span宽高设置无效。
5.两种元素各种的居中方法

区别

块级元素居中：首先必须要设置它的宽度，未设高度的情况下，在本图中，块级元素p已经处于居中状态，因为它占据了这一整行。设置它的宽度，才能使用 margin: 0 auto对块级元素中的文本进行居中。
行内元素居中：使用 text-align:center进行居中，参考MDN中的解释：> text-align:center定义行内内容如何相对于它的块父元素对齐， text-align并不控制块元素自己对齐，只控制它的行内内容的对齐。
首先要给行内元素添加便于添加样式的父元素（div），若不加div，可使用body父元素，不过这会对所有元素产生影响。
参考