解决方法
块布局(如div默认情况下)由垂直堆叠的线框组成，它们之间绝不会有空格，也不会重叠。每个线框以一个虚线开始，该虚线是一个虚拟的直线框，为块指定的线高的高度。然后，线框根据它们的线高度继续进行标记的内联框。
下图显示了第一个示例的布局。注意，因为字体高度的1.7倍远小于支柱的高度，所以线高度由支柱的高度确定，因为线框必须完全包含其内联框。如果您已将跨度上的线高度设置为大于200像素，则线框将更高，您会看到文本移动更远。
当使用span inline-block时，div和span之间的关系不会改变，但是span会使它自己的块布局结构拥有自己的线框堆栈。因此，文本和换行符布置在这个内部堆栈中。内部块的支柱是字体高度的1.7倍，即与文本相同，并且布局现在看起来如下，因此文本行位置更靠近在一起，反映了跨度的行高设置。
(注意，两个图是在不同的尺度。)
