HTML 块元素 行元素的区别

经常被问到的一个面试题。
在这里我决定整理一下，给自己做一个笔记吧。
也希望以后遇到这样的问题能够应答自如。进入正题：

---

块级元素和行内元素最明显的区别就是：块级元素占据一整行，而行内元素可以在一行并排显示，也就是独自撑不起一行。
块级元素：比如 div p ul table

• 会以新行开始和结束，并且占据一整行。
• 高度，行高，内边距，外边距都可以设置，可以控制。
• 宽度始终与浏览器的宽度一样，与内容无关。

• 块元素可以容纳行内元素或者内嵌块级元素。

  行内元素：比如 span a img i

• 不会以新行开始和其他元素都在一行上。
• 宽度只与内容有关
• 不可以设置宽高，宽度随着内容的增加而增加，高度随字体大小而改变。
• 行元素可以设置外边界，但是外边界只对左右起作用而不对上下起作用。