a标签中嵌套img和span，img和span中间留有巨大空白，这是为什么？

 a {
        float: left;
        width: 150rem/@baseFont;
        height: 140rem/@baseFont;
        text-align: center;

        img {
            display: block;
            width: 82rem/@baseFont;
            height: 82rem/@baseFont;
            margin: 10rem/@baseFont auto 0;
        }

        span {
            font-size: 25rem/@baseFont;
            color: #333;
        }
    }

把span也转化为block就好了

字体大小

我这边尝试了没有空白，你可以点击F12，点击弹框左上角的箭头，选中img和span元素，审查其大小，看看是什么原因造成的

a {

float: left;

width: 150rem/@baseFont;

height: 140rem/@baseFont;

text-align: center;

font-size:0px;

 

img {

display: block;

width: 82rem/@baseFont;

height: 82rem/@baseFont;

margin: 10rem/@baseFont auto 0;

}

span {

font-size: 25rem/@baseFont;

color: #333;

}

}

设置vertical-align为底部对齐，图片默认是基线对齐的