span与div 行内元素和块元素（标签）

讨论span与div的区别实质是行内元素与块元素有什么不同

span 是 行内元素

div 是 块元素

w3c关于行内元素与块元素的定义  w3c

块元素:块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内元素:行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

不知看懂了没有

用代码测试 就容易验证下面两点

其实 第一点 块元素的宽度是占据整行 而行内元素的宽度是根据元素内容的宽度

例如 <p>标签 与 <span>标签 就很容易测试出来

 第二点 行内元素 属性height width margin-top margin-bottom padding-top padding-bottom是无效 

但是margin-left margin-right padding-left padding-right是有效的，而块元素全部height width margin padding都是有效的

display属性 其实就是设置标签具有行内元素属性特性或着是块元素属性特性 更详细的说明查w3c手册

block: 设置成块元素

inline:设置成行内元素

inline-block: 让标签具有块元素 和 行内元素的属性特性 如有疑问 用代码测试最容易理解