u012881935
小奶包他干奶奶
采纳率18.2%
2017-03-14 03:11 阅读 4.0k

求教:为什么<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条回答 默认 最新

  • qq_29594393 当作看不见 2017-03-14 03:26

    padding:0;
    把内边距去掉.

    点赞 评论 复制链接分享
  • qq_34379959 qq_34379959 2017-03-14 03:27

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

    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2017-03-14 04:07

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

     <style>
    .nhm{border:1px solid green;display:inline-block;line-height:15px;font-size:15px}
    </style>
    
    <span class="nhm">你好吗</span>
    
    点赞 评论 复制链接分享
  • android_gogogo 一只小小小蜜蜂 2017-03-14 06:34

    把padding设置0

    点赞 评论 复制链接分享
  • Eudaemonia_S Eudaemonia_S 2017-03-14 07:39

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

    点赞 评论 复制链接分享
  • Penny_1993 penny_1993 2017-03-14 13:22

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

    点赞 评论 复制链接分享
  • u012881935 小奶包他干奶奶 2017-03-15 00:50

    完整代码是这样的:

    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;
    }
    
    点赞 评论 复制链接分享
  • Penny_1993 penny_1993 2017-03-15 08:59

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

    点赞 评论 复制链接分享
  • candy_tity 陈田田 2017-03-20 04:35

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

    点赞 评论 复制链接分享

相关推荐