White Maskers White Maskers - 2 months ago 5
CSS Question

how to remove the white space between two span 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>





on above code I have two span tag elements: elite and admin. I want to remove space between them. I tried to put negative value for padding property of second span element, but it's not working. how can I fix this?

Answer

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>

Comments