.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 元素的填充属性设置负值，但它不起作用。我怎样才能解决这个问题？
最佳答案
Jordi Flores 是对的。内联(和内联 block )元素呈现为文本字符，这意味着 HTML 代码中的空格或换行符将导致呈现输出中的空格。您只需删除代码中的格式字符即可解决此问题。
如果您想让代码井井有条，可以使用 HTML 注释。例如:
<div>
<span>My span 1</span><!--
--><span>My span 2</span><!--
--><span>My span 3</span><!--
--><span>My span 4</span>
</div>
关于html - 如何删除两个 span 标签之间的空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39570556/