如何删除两个span标签之间的空白? [英] how to remove the white space between two span tags?
本文介绍了如何删除两个span标签之间的空白?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
.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属性设置负值，但是它不起作用.我怎样才能解决这个问题?
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?
推荐答案
更新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>
这篇关于如何删除两个span标签之间的空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
