神秘的保证金？

时间：2017-06-12 11:18:25

标签： html css

我一直在用CSS和PHP创建一个网站，并且标题似乎在每个链接之间有大约2px的边距。 我自己没有定义这个边距，无法在任何地方找到问题的原因。 我可以通过添加2px的负余量来解决问题，但我觉得这并没有真正解决问题，只是掩盖它。

这些链接是内嵌式的，并且在彼此齐平之前，并且与＃34; Leader Board＆＃34;我有。

Margin between the Home and Login links

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  min-height: 100%;
}

h1 {
  font-size: 22px;
  margin: 0px;
}

h2 {
  padding: 5px;
  margin: 0px;
}

h3 {
  padding: 5px;
  margin: 0px;
}

p {
  margin: 0px;
  padding: 5px;
}

#wrapper {
  position: relative;
  min-height: 100%;
  background-color: #eee;
  background-size: cover;
}

#header {
  padding: 0px 50px 0px 0px;
  margin: 0;
  position: fixed;
  width: 100%;
  height: 90px;
  background-color: #ffbb00;
  text-align: right;
  line-height: 90px;
}

#header h1 {
  padding: 0px 0px 0px 5px;
  margin: 0;
  float: left;
  text-align: center;
  display: inline-block;
  line-height: 90px;
  font-size: 80px;
  color: #00a1ff;
  font-style: italic;
  text-transform: uppercase;
}

#header a {
  padding: 0px 25px 0px 25px;
  margin: 0;
  transition: background .5s;
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  text-decoration: none;
  text-align: center;
  line-height: 90px;
  font-size: 25px;
  letter-spacing: 4px;
  color: #fff;
  text-transform: uppercase;
}

#header a#selected {
  background: #ff9f00;
  cursor: default
}

#header a:hover {
  transition: background .5s;
  background: #ffaa00
}

#LeaderBoard {
  position: fixed;
  margin-top: 90px;
  right: 0px;
  float: right;
  width: 492px;
  height: 100%;
  background-color: #FFEE77;
  padding: 0px;
  z-index: 9;
}

#LeaderBoardHead {
  background-color: #ffb233;
  height: 65px;
  line-height: 65px;
  width: 100%;
  margin-top: 0px;
}

#LeaderBoardHead h2 {
  font-family: sans-serif;
  color: #ffffff;
  padding: 0 0 0 0;
  font-size: 50;
  text-align: center;
}

#welcome {
  position: relative;
  margin-top: 180px;
  margin-right: 45%;
  margin-left: 5%;
  padding: 0px;
  float: right;
  width: auto;
  height: auto;
  background-color: ;
  z-index: 1;
}

#welcome h2 {
  font-size: 50;
  font-family: sans-serif;
  font-style: italic;
  color: #00a1ff;
}

#welcome h3 {
  color: #00a1ff;
  font-size: 22;
}

#welcome p {
  color: #00a1ff;
  font-size: 18;
}
＆＃13; 
<html>

<head>

  <title>Flash Crash</title>
  <link rel="shortcut icon" href="../assets/favicon.png">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">

  <meta name="description" content="Flash Crash" />
  <meta name="viewport" content="width=device-width" />

</head>

<body>
  <div id="wrapper">
    <div id="header">

      <h1>Flash Crash</h1>

      <a id="selected" href="../index.php" hreflang="en-gb">Home</a> <a href="../login.php" hreflang="en-gb">Login</a> <a href="../feedback.php" hreflang="en-gb">Feedback</a> </div>
    <link rel="stylesheet" type="text/css" href="../css/LeaderBoard.css" />

    <div id="LeaderBoard">

      <div id="LeaderBoardHead">
        <h2>Leader Board</h2>
      </div>

      <div id="LeaderBoardContent">

      </div>

    </div>
    <link rel="stylesheet" type="text/css" href="../css/welcome.css" />

    <div id="welcome">
      <h2>Welcome to Flash Crash!</h2>
      <h3>The Online Flash Card Crash Course for Computer Science</h3>
      <p>Flash Crash is a competitive online revision tool for computing students. <br> compete against your class mates by compleeting randomly generated quizzes <br> to earn points and unlock new editing permissions on the site!
      </p>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

这是我的网站，您可以自己查看问题：

jakehowell.me

非常感谢任何帮助，谢谢！

4 个答案:

答案 0 :(得分：1)

菜单a标记之间有空格。如果删除它们，它会按预期工作。

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  min-height: 100%;
}

h1 {
  font-size: 22px;
  margin: 0px;
}

h2 {
  padding: 5px;
  margin: 0px;
}

h3 {
  padding: 5px;
  margin: 0px;
}

p {
  margin: 0px;
  padding: 5px;
}

#wrapper {
  position: relative;
  min-height: 100%;
  background-color: #eee;
  background-size: cover;
}

#header {
  padding: 0px 50px 0px 0px;
  margin: 0;
  position: fixed;
  width: 100%;
  height: 90px;
  background-color: #ffbb00;
  text-align: right;
  line-height: 90px;
}

#header h1 {
  padding: 0px 0px 0px 5px;
  margin: 0;
  float: left;
  text-align: center;
  display: inline-block;
  line-height: 90px;
  font-size: 80px;
  color: #00a1ff;
  font-style: italic;
  text-transform: uppercase;
}

#header a {
  padding: 0px 25px 0px 25px;
  margin: 0;
  transition: background .5s;
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  text-decoration: none;
  text-align: center;
  line-height: 90px;
  font-size: 25px;
  letter-spacing: 4px;
  color: #fff;
  text-transform: uppercase;
}

#header a#selected {
  background: #ff9f00;
  cursor: default
}

#header a:hover {
  transition: background .5s;
  background: #ffaa00
}

#LeaderBoard {
  position: fixed;
  margin-top: 90px;
  right: 0px;
  float: right;
  width: 492px;
  height: 100%;
  background-color: #FFEE77;
  padding: 0px;
  z-index: 9;
}

#LeaderBoardHead {
  background-color: #ffb233;
  height: 65px;
  line-height: 65px;
  width: 100%;
  margin-top: 0px;
}

#LeaderBoardHead h2 {
  font-family: sans-serif;
  color: #ffffff;
  padding: 0 0 0 0;
  font-size: 50;
  text-align: center;
}

#welcome {
  position: relative;
  margin-top: 180px;
  margin-right: 45%;
  margin-left: 5%;
  padding: 0px;
  float: right;
  width: auto;
  height: auto;
  background-color: ;
  z-index: 1;
}

#welcome h2 {
  font-size: 50;
  font-family: sans-serif;
  font-style: italic;
  color: #00a1ff;
}

#welcome h3 {
  color: #00a1ff;
  font-size: 22;
}

#welcome p {
  color: #00a1ff;
  font-size: 18;
}
＆＃13; 
<html>

<head>

  <title>Flash Crash</title>
  <link rel="shortcut icon" href="../assets/favicon.png">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">

  <meta name="description" content="Flash Crash" />
  <meta name="viewport" content="width=device-width" />

</head>

<body>
  <div id="wrapper">
    <div id="header">

      <h1>Flash Crash</h1>

      <a id="selected" href="../index.php" hreflang="en-gb">Home</a><a href="../login.php" hreflang="en-gb">Login</a><a href="../feedback.php" hreflang="en-gb">Feedback</a></div>
    <link rel="stylesheet" type="text/css" href="../css/LeaderBoard.css" />

    <div id="LeaderBoard">

      <div id="LeaderBoardHead">
        <h2>Leader Board</h2>
      </div>

      <div id="LeaderBoardContent">

      </div>

    </div>
    <link rel="stylesheet" type="text/css" href="../css/welcome.css" />

    <div id="welcome">
      <h2>Welcome to Flash Crash!</h2>
      <h3>The Online Flash Card Crash Course for Computer Science</h3>
      <p>Flash Crash is a competitive online revision tool for computing students. <br> compete against your class mates by compleeting randomly generated quizzes <br> to earn points and unlock new editing permissions on the site!
      </p>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

在锚标记之间存在whiteSpace文本节点。在锚标记中，您会发现锚标记之间存在小气泡。 看到这个链接。你会找到答案 https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/

答案 2 :(得分：0)

这是一个已知的白色空间问题 您可以删除链接之间的空格或将它们浮动在彼此旁边以解决此问题。

答案 3 :(得分：0)

不是在每个元素中使用 margin：0px; ，而是使用：

*{
    margin: 0;
 }

*用于应用你在那里放置的任何东西

相关问题
最新问题