如何删除两个span标签之间的空白？

时间：2016-09-19 10:10:42

标签： html css 

    .side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            /*padding-top:60px;*/
            height:100%;
            /*top:0;*/
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            /*top: 0;*/
            height: 60px;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
        /*padding-top: 60px;*/
    }
    .top-left-image{
        float: left;
        height: 40px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 2.7px;
    }
    .left-top-text{
        display: inline-block;
        padding-top:6px;
        font-size: 30px;
        white-space: nowrap;
       /* word-spacing: -1px;
       /* float: right;*/
        /*margin-left: 10px;*/
    }
    .text-elite{
        font-weight: 600;
    }
    .text-admin{
        padding-left: -5px;
    }
    /*---------------top left part ends here-------------*/
    /*---------------top-right part starts here----------*/
    .top-right-part{
        top: 0 !important;
        background-color:#4F5467;
        width:100%;
        height:60px;
        right: 0;
    }
    .arrow-left{
        color: white;
    }
    /*---------------top right part ends here-------------*/
<html>
    <head>
              <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
              <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
              <link rel="stylesheet" type="text/css" href="css/style.css" />
              <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span>
                <span class="left-top-text text-admin">admin</span>
            </div>
            <div class="top-right-part">
                <span class="arrow-left fa-arrow-left"> </span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>

上面的代码我有两个span标记元素：elite和admin。我想删除它们之间的空间。我试图为第二个span元素的padding属性设置负值，但它不起作用。我怎样才能解决这个问题？

5 个答案:

答案 0 :(得分：5)

只需将font-size: 0;提供给.top-left-part并尝试.... 

.top-left-part {
   width: 220px;
   float: left;
   background-color: #ffffff;
/* padding-top: 60px; */
   font-size: 0;
 }

实际上默认情况下显示内联块会在元素之间创建一个不可见元素，因此我们需要删除将font-size: 0赋予父元素的元素。而且你必须给你的子元素赋予font-size。

答案 1 :(得分：4)

只需删除html标记之间的空格

＆＃13;
＆＃13; 
    .side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            /*padding-top:60px;*/
            height:100%;
            /*top:0;*/
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            /*top: 0;*/
            height: 60px;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
        /*padding-top: 60px;*/
    }
    .top-left-image{
        float: left;
        height: 40px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 2.7px;
    }
    .left-top-text{
        display: inline-block;
        padding-top:6px;
        font-size: 30px;
        white-space: nowrap;
       /* word-spacing: -1px;
       /* float: right;*/
        /*margin-left: 10px;*/
    }
    .text-elite{
        font-weight: 600;
    }
    .text-admin{
        padding-left: -5px;
    }
    /*---------------top left part ends here-------------*/
    /*---------------top-right part starts here----------*/
    .top-right-part{
        top: 0 !important;
        background-color:#4F5467;
        width:100%;
        height:60px;
        right: 0;
    }
    .arrow-left{
        color: white;
    }
    /*---------------top right part ends here-------------*/
＆＃13; 
<html>
    <head>
              <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
              <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
              <link rel="stylesheet" type="text/css" href="css/style.css" />
              <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span><span class="left-top-text text-admin">admin</span>
            </div>
            <div class="top-right-part">
                <span class="arrow-left fa-arrow-left"> </span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：3)

Jordi Flores是对的。内联（和内联块）元素呈现为文本字符，这意味着HTML代码中的空格或换行符将在渲染输出中生成空格。您只需删除代码中的格式字符即可解决此问题。

如果要保持代码的有序性，可以使用HTML注释。例如：

<div>
   <span>My span 1</span><!-- 
--><span>My span 2</span><!--
--><span>My span 3</span><!--
--><span>My span 4</span>
</div>

答案 3 :(得分：0)

像这样更改你的CSS - 这应该有效。

.text-admin{
  display: inline-block;
  margin-left: -5px;
}

<span> 元素是内联元素，意味着它的宽度取决于它的内容。填充和边距不适用。 To＆＃34;启用＆＃34;支持边距和填充，您必须更改范围以呈现为内联块元素。 （display: inline-block;）。在此之后，您可以应用负边距，例如4px可缩小元素之间的差距。

答案 4 :(得分：-3)

更新Css 

.left-top-text {
    display: inline-block;
    padding-top: 6px;
    font-size: 30px;
    white-space: nowrap;
    margin-left: -5px;
}

代码段示例 

.side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            /*padding-top:60px;*/
            height:100%;
            /*top:0;*/
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            /*top: 0;*/
            height: 60px;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
        /*padding-top: 60px;*/
    }
    .top-left-image{
        float: left;
        height: 40px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 2.7px;
    }
   .left-top-text {
    display: inline-block;
    padding-top: 6px;
    font-size: 30px;
    white-space: nowrap;
    margin-left: -5px;
   }
    .text-elite{
        font-weight: 600;
    }
    .text-admin{
        padding-left: -5px;
    }
    /*---------------top left part ends here-------------*/
    /*---------------top-right part starts here----------*/
    .top-right-part{
        top: 0 !important;
        background-color:#4F5467;
        width:100%;
        height:60px;
        right: 0;
    }
    .arrow-left{
        color: white;
    }
    /*---------------top right part ends here-------------*/
<html>
    <head>
              <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
              <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
              <link rel="stylesheet" type="text/css" href="css/style.css" />
              <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span>
                <span class="left-top-text text-admin">admin</span>
            </div>
            <div class="top-right-part">
                <span class="arrow-left fa-arrow-left"> </span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>

相关问题
最新问题