如何删除两个跨度标签之间的空白？
[英]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.
在上面的代码中，我有两个 span 标签元素：elite 和 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.我试图为第二个 span 元素的 padding 属性设置负值，但它不起作用。 how can I fix this?我怎样才能解决这个问题？
5 个解决方案
解决方案1
13 2016-09-19 11:09:29
Jordi Flores is right. Jordi Flores 是对的。 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.内联（和内联块）元素像文本字符一样呈现，这意味着 HTML 代码中的空格或换行符将导致呈现的输出中出现空格。 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.如果您想让代码井井有条，可以使用 HTML 注释。 For ex:例如：
<div>
<span>My span 1</span><!--
--><span>My span 2</span><!--
--><span>My span 3</span><!--
--><span>My span 4</span>
</div>
解决方案2
8 2016-09-19 10:17:27
Just Remove space between html tags只需删除 html 标签之间的空格
.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>
解决方案3
6 2016-09-19 10:25:40
just give font-size: 0;只给font-size: 0; to .top-left-part and try....到 .top-left-part 并尝试....
.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.实际上默认 display inline-block 将在元素之间创建一个不可见的节点，因此我们需要删除该节点，将font-size: 0赋予父元素。 And you have to give font-size to your child elements.并且您必须为您的子元素提供字体大小。
解决方案4
0 已采纳 2016-09-19 10:17:22
Update Css更新 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>
解决方案5
0 2016-09-19 10:19:50
Change your CSS like this - this should work.像这样更改您的 CSS - 这应该可以工作。
.text-admin{
display: inline-block;
margin-left: -5px;
}
<span> elements are inline-elements, means that it's width depends on it's content. <span>元素是内联元素，意味着它的宽度取决于它的内容。 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; ). （带display: inline-block; ）。 After this you can apply a negative margin of eg 4px to reduce the gap between your elements.在此之后，您可以应用例如 4px 的负边距来减少元素之间的间隙。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.