讨论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: 让标签具有块元素 和 行内元素的属性特性 如有疑问 用代码测试最容易理解