HTML元素之间不寻常的间距_Html_Css

HTML元素之间不寻常的间距

html css

HTML元素之间不寻常的间距,html,css,Html,Css,我有以下菜单 HTML代码 <div class="container"> <div class="links"> <span class="link" href="#">Toate</span> <span class="link" href="#">Online</span> <span class="link" href="

我有以下菜单

HTML代码

<div class="container">
        <div class="links">
            <span class="link" href="#">Toate</span>
            <span class="link" href="#">Online</span>
            <span class="link" href="#">Noi</span>
            <span class="link" href="#">Top</span>
        </div>
        <div class="profile"></div>
    </div>

现在，my.link元素之间有一个间距。没有空白，没有空白。如果我将div.links复制粘贴到body中，结果相同（没有应用CSS）。如果仅复制主体中的span.link元素，则它们之间没有间距。我尝试添加宽度：auto-on.links。我尝试在和之间切换.link。尝试显示：内联、内联flex、内联块。。。什么都没用

如何修复此问题？

一个可能的快速修复方法是删除HTML代码中的空格。这是一个常见的已知错误，浏览器呈现错误

您的HTML代码必须如下所示：

 <span class="link" href="#">Toate</span><span class="link" href="#">Online</span><span class="link" href="#">Noi</span><span class="link" href="#">Top</span>

ToateOnlineNoiTop

SPAN类之间不能有任何间距

span

是一个内联元素。将它们放在同一条线上，中间没有空格，如下所示：

 <span class="link" href="#">Toate</span><span class="link" href="#">Online</span><span class="link" href="#">Noi</span><span class="link" href="#">Top</span>

ToateOnlineNoiTop

这应该会消除它们之间的间隔。

这里有点困惑，你在追求什么。我想你的建议是在去掉元素之间的填充物之后。您在其中添加了“padding:0 10px；”第二个图形是左右填充，第一个是垂直填充

正如HappyDane和rkrishnan所建议的那样，之所以会出现这种情况，是因为每个跨度都有自己的一行，而HTML将新行解释为一个空格。如果要将每个跨距保持在自己的行上，可以将父元素的

font-size

设置为

，并将.link的

font-size

设置为

1rem

（或任何内容）。

如果要保留标记，可以设置

font-size:0

到父元素（在本例中为

.links

），然后相应地设置

span

的字体大小。这也将删除间距

使用“.link”跨距的“float:left”删除它们之间不必要的间距

.topmenu .container .links .link {
  box-sizing: border-box;
  height: 100%;
  text-decoration: none;
  padding: 0 10px;
  color: #fff;
  float: left;
}

这就是你要找的？我不能真正理解你的问题

<!DOCTYPE html>
<html>
 <head>
  <style>
   .container, .link {
     border-style: solid;
     border-width: 1px;
     background-color: red;
     float: left;
   }
  </style>
 </head>
 <body>
  <div class="container">
    <div class="links">
        <span class="link" href="#">Toate</span>
        <span class="link" href="#">Online</span>
        <span class="link" href="#">Noi</span>
        <span class="link" href="#">Top</span>
    </div>
    <div class="profile"></div>
  </div>
 </body>
</html>


.container、.link{
边框样式：实心；
边框宽度：1px；
背景色：红色；
浮动：左；
}
烤面包
在线 的
诺伊
顶部

HTML

希望这有帮助。

在CSS for.link类中添加float:left，如下所示。这将使元素在父DIV内向左浮动。因此将删除间距

.topmenu .container .links .link {
box-sizing: border-box;
height: 100%;
text-decoration: none;
padding: 0 10px;
color: #fff;
float:left;
}

您有以下规则填充：0 10px；您的示例完全缺少.topmenu类，因此您的CSS都不会应用。。。这可能也是你的live页面的问题吗？我添加了.topmenu规则。错失了他们@说明填充是用于链接内部的。。边框显示元素的结束位置我猜这是内联元素的正常间距，这是由html代码中的空白造成的。如果是这样的话，有很多方法可以摆脱它，都有自己的问题。例如，删除whitepsace，

float:left

…除了有填充的@spekdrum之外，内联元素（如

）将附加在文本行中，因此所有空格都将被呈现，是的，您的换行符和制表符也是空格。否！！！这不是虫子。一个bug应该是相反的。你真的是说如果HTML是

hello world

，浏览器应该将其呈现为“helloworld”？这很有效。等待6分钟以标记此应答如果是链接，则应将其更改为

标记。或者是html块上带有

标记的内联列表：原因是内联元素被视为文本单词，文本单词之间有自己的空白。这就是生成空白的原因。不，这不是原因。原因是内联元素被视为页面上的单词，单词之间用空格分隔。台词与此无关。

.topmenu {
    background: #6b00f3 linear-gradient(180deg, #7f0000, #6b0103) repeat scroll 0 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 48px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
 }
.topmenu .container {
    height: 100%;
}
.topmenu .container .links {
    height: 100%;
}
.topmenu .container .links .link {
    box-sizing: border-box;
    height: 100%;
    text-decoration: none;
    padding: 0 10px;
    color: #fff;
}
.topmenu .container .links .link:not(:last-child) {
    border: 1px solid #630000;
}

.topmenu .container .links .link {
box-sizing: border-box;
height: 100%;
text-decoration: none;
padding: 0 10px;
color: #fff;
float:left;
}