简述块级元素与行内元素的区别

一.明确块级元素与行内元素的概念

定义：

        块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

        行内元素：一个行内元素只占据它对应标签的边框所包含的空间。

二.嵌套关系

块级元素嵌套行内元素、文本，行内元素内只能包含文本与行内等。

三.块级元素与内联元素的重要区别

格式： 

         默认情况下，块级元素会新起一行。

         内联元素不会。

内容模型：

        一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

宽高设置：

        块元素可以指定宽高，而行内元素无法设置。

Padding\margin：

        行内元素使用padding-left，padding-right时会生效。但是padding-top，padding-bottom虽然也可以看到撑开的效果，但是实际高度不发生变化。(即上下生效，左右不生效)