发表新帖
发表新帖

how to remove the white space between two span tags?

后端 未结
关注
5 2035
死守一世寂寞
死守一世寂寞 2021-01-15 10:33
相关标签:
5条回答
  • 爱一瞬间的悲伤
    2021-01-15 10:57

    Just Remove space between html tags

        .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>

    0 讨论(0)
  • 不知归路
    2021-01-15 11:02

    Jordi Flores is right. Inline (and inline-block) elements are rendered like text characters, meaning a space or a newline in the HTML code will result in a space in the rendered output. You just have to remove the formatting characters in the code to fix this.

    If you want to keep your code organized, you can use HTML comments. For ex:

    <div>
   <span>My span 1</span><!-- 
--><span>My span 2</span><!--
--><span>My span 3</span><!--
--><span>My span 4</span>
</div>
    0 讨论(0)
  • 情话喂你
    2021-01-15 11:12

    Update Css

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

    Snippet Example 

    .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>

    0 讨论(0)
  • 一整个雨季
    2021-01-15 11:15

    Change your CSS like this - this should work.

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

    <span> elements are inline-elements, means that it's width depends on it's content. Paddings and margins aren't applied. To "enable" support for margins and paddings, you have to change the span to render as inline-block element. (with display: inline-block;). After this you can apply a negative margin of e.g. 4px to reduce the gap between your elements.

    0 讨论(0)
  • 渐次进展
    2021-01-15 11:20

    just give font-size: 0; to .top-left-part and try....

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

    Actually by default display inline-block will create one invisible node between the elements so we need to remove that node giving font-size: 0 to the parent element. And you have to give font-size to your child elements.

    0 讨论(0)
 看不清?
提交回复
热议问题