在CSS中span标签设置padding-top/bottom以及margin-top/bottom无效的解决方法

在解决问题前,我们先了解下span标签。

标签被用来组合文档中的行内元素(内联元素)。

span标签有这么几个特点:

1、span标签是一个内联元素,只能容纳文本或者其他内联元素；

2、和其他内联元素一样,内联元素的宽度和高度就是包含的文字或图片的宽度和高度

3、给span标签设置高height、宽width、上下内边距(padding-top/bottom)、上下外边距(margin-top/bottom)都是不起作用的。

给span标签设置左右内边距(padding-left/right)、左右外边距(margin-left/right)、行高(line-height)是有效的。

解决给span标签设置高height、宽width、上下内边距(padding-top/bottom)、上下外边距(margin-top/bottom)不起作用方法:

给span标签设置一个display属性(display:block;和display:inline-block;都可以)。