span设置了margin-top:10px,为什么不是距离上面10px，还有这么大的空隙？

Question

.header_1_1 span{
    display:inline-block;
    margin-top:10px;
    font-size:30px;
    
}

Answer 1

综上所述，img和span都是行内元素，他们的默认基线都是以底部对齐的方式呈现，如字母文字，都是如此。当你在span设置inline-block的时候，这时它是行内块元素，就可以设置margin，但是它还是有行元素的性质，也就是说基线底部对齐，为了解决这个问题你可以改变它的默认对齐方式，譬如vertical-align：top；，或者让它浮动，都可以解决这个问题。

Answer 2

大兄弟，span是行内元素，不支持上下margin和宽高，你是没有设置display:inline-block;吧

Answer 3

像楼上所说那样，span是行内元素，margin什么的对它都不起用的，设置一下display:inline-block;然后再设置一个vertical-align:top;就会跑上去了

Answer 4

行内样式不支持magin 以及宽高 要用块样式就要设置成行内块 再去设置样式,以后给一个元素设置样式,首先要明白他是行内元素还是块元素,然后再去对应的设置!切记!否则一堆问题!

Answer 5

span是行内元素，不支持上下margin和宽高，你可以设置为行内块元素display:inline-block;line-height:1;试一试。

Answer 6

只需要给span元素加个 vertical-align: top; 就行了

Answer 7

这个是vertical-align的问题，可以搜一下相关文章的解说，设置成inline-block后经常就会出现这样的问题，可以改用float就不会了