求教:为什么<span>包裹的文字会留有空白

问题:span包裹的文字距离上下边框线会留有空白(如图),这是为什么呢,要怎么解决?

(https://img-ask.csdn.net/upload/201703/14/1489460975_778726.png)

HTML代码

 <body>
        <span class="nhm">你好吗</span>
    </body>

CSS代码

 <style type="text/css">
            .nhm{
                border:1px solid green;
            }
        </style>

padding为0,line-height等于font-size大小

上下的空白是由默认的行高决定的。

padding:0;
把内边距去掉.

应该有默认的样式吧,你看看浏览器那边F12看看,margin里面是不是有值

变块级元素,调整下行高。行内元素有个高度,不懂怎么消除。。

 <style>
.nhm{border:1px solid green;display:inline-block;line-height:15px;font-size:15px}
</style>

<span class="nhm">你好吗</span>

把padding设置0

我照你的运行一下,并没有出现你说的问题?你还写了其他的代码吗?

完整代码是这样的:

HTML

 <div class="header">
            <div class="headerleft">
                <span>ife.baidu.com</span>
            </div>
            <span class="headerright">2017.03</span>
        </div>

CSS

 *{
    margin: 0;
    padding: 0;
}
body{
    width: 980px;
    height:1386px;
    margin:0 auto;
}
.header{
    width:892px;
    border-bottom: 2px solid #938e8c;
    margin:0 auto;
    overflow: hidden;
    position: relative;
}
.headerleft{
    float: left;
    width:110px;
    height: 61px;
    background-color: #d45d5c;
    position: relative;
}
.headerleft span{
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    font-family: 黑体;
    color: #ffffff;
    position: absolute;
    bottom:0;
    margin-left:7px;
    border: 1px solid green;
}
.headerright{
    display: inline-block;
    float: right;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    line-height: 12px;
    font-family: 黑体;
    color: #d45d5c;
    border: 1px solid green;
}

我试了一下,如果是中文就不会出现这种情况,英文数字就会有,具体为什么,我也不知道!