给 span 和 div 设置 line-height 时，为什么会出现这种差异？(如图) 。我以为它们会呈现一样的效果

Question

可以在这里查看两者的运行效果，两者代码基本是一样的，但其中一个标签是 div,另一个是 span
   div:  https://jsbin.com/wabamufabi/edit?html,css,output
   span: https://jsbin.com/xikeluzode/edit?html,css,output

Answer 1

div和span的区别是block和inline，对于inline的元素，标签的宽度只被内部文字宽度影响，文字宽度只被字体大小影响，和行高没关。因此inline的span，即使行高清空，不影响水平布局长度。