Question

我创建了一个带有HTML / CSS的网站，当我看到我的背景和两个单词的边框之间有一个空白区域时，我正在使用我的页面导航器。 A，d我现在不知道如何删除那个白色空间这里是一张图片

enter image description here

上面留下的链接按钮是否有人现在如何删除它？

我的代码。

<html>
<head>
<style>
#h1index {color : black;  text-align: center; background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid; border-radius: 25px; border-color: black;}
body {background-color: #F8F8F8;} <!-- achtergrond kleur -->
#tekstindex {color : black;}
#homelink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid;  border-color: black transparent black black;   text-decoration: none; border-radius: 25px 0px 0px 25px;  font-size: 25px; padding-left: 5px;  }
#projectslink {background: linear-gradient(to bottom,#F2F2F2,#94A394); border-style: solid;  border-color: black transparent black transparent;   text-decoration: none;  font-size: 25px; }
</style>
</head>
<body>
<a href="url" id="homelink">home</a> <!-- hompage link --> <a href="url" id="projectslink">projects</a> <!-- link naar projects pagina --><a href="url" id ="gameslink">games</a><!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1> <!-- welcom message -->
<p id="tekstindex">latest news.</p>
</body>
</html>

Answer 1

内联元素对代码中的空白区域很敏感。只需删除它。

#h1index {
  color: black;
  text-align: center;
  background: linear-gradient(to bottom, #F2F2F2, #94A394);
  border-style: solid;
  border-radius: 25px;
  border-color: black;
}
body {
  background-color: #F8F8F8;
}
<!-- achtergrond kleur --> #tekstindex {
  color: black;
}
#homelink {
  background: linear-gradient(to bottom, #F2F2F2, #94A394);
  border-style: solid;
  border-color: black transparent black black;
  text-decoration: none;
  border-radius: 25px 0px 0px 25px;
  font-size: 25px;
  padding-left: 5px;
}
#projectslink {
  background: linear-gradient(to bottom, #F2F2F2, #94A394);
  border-style: solid;
  border-color: black transparent black transparent;
  text-decoration: none;
  font-size: 25px;
}

<a href="url" id="homelink">home</a><!-- hompage link --><a href="url" id="projectslink">projects</a> 
<!-- link naar projects pagina --><a href="url" id="gameslink">games</a>
<!-- linkinaar games pagina -->
<h1 id="h1index"> welcom to the codenoob website </h1> 
<!-- welcom message -->
<p id="tekstindex">latest news.</p>

Answer 2

显然，这是由于两个词之间的空间。

你应该使用<span>来包装这两个单词并在<span>上应用样式

Answer 3

尝试将按钮浮动到左侧。向左飘浮。此外，将位置设置为相对可能会有效。

我的线屁股有白色空间

3 个答案: