求教:为什么<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>

9个回答

padding:0;
把内边距去掉.

u012881935
小奶包他干奶奶 添加了padding:0;还是一样的。。
2 年多之前 回复

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

u012881935
小奶包他干奶奶 margin里面没有值
2 年多之前 回复

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

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

<span class="nhm">你好吗</span>
u012881935
小奶包他干奶奶 回复showbo: 因为原来的代码是把这个span定位到父级div的底部,但是定位后span并没有贴着div的底部,所以就给span加了个边框看一下,发现是span内的文字内容与span之间有空白
2 年多之前 回复
showbo
支付宝加好友偷能量挖 回复小奶包他干奶奶: 什么浏览器。Firefox和chrome自己调整line-height上下边框可以紧贴文字,ie不行。而且你干嘛要贴着文字,奇怪的要求。.nhm{border:1px solid green;display:inline-block;line-height:12px;font-size:15px;padding-bottom:1px;}
2 年多之前 回复
u012881935
小奶包他干奶奶 还是不可以诶。。
2 年多之前 回复

把padding设置0

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

u012881935
小奶包他干奶奶 都设置了,还是不行
2 年多之前 回复

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

u012881935
小奶包他干奶奶 恩恩,是的,我把完整的贴出来
2 年多之前 回复

完整代码是这样的:

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;
}

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!