html - 神秘边缘？-6ren

html - 神秘边缘？

转载作者：行者123 更新时间：2023-11-27 23:13:35

我一直在用 CSS 和 PHP 制作一个网站，标题似乎在每个链接之间有大约 2px 的边距。我自己没有定义这个边距，也找不到问题的原因。我可以通过添加 2px 的负边距来解决这个问题，但我觉得这并不能真正解决问题，只是掩盖了它。

链接是内联 block ，在它们彼此齐平并与我拥有的“排行榜”div 内联之前。

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;
}

<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>

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

jakehowell.me

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

最佳答案

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

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;
}

<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>

关于html - 神秘边缘？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44498145/

文章推荐： c++ - 更改数组的2行数据

文章推荐： javascript - 了解Redux生命周期，(初始ajax加载不起作用)

文章推荐： c++ - 为什么我的复制构造函数不起作用？

检查字符串中的数字是否对称(边缘)
我有一串数字。我需要检查边缘上的数字是否对称，这意味着它们以 2 为模时具有相同的余数。我已经编写了一个有效的代码，但我对此感到不安，在一些失败之后我想出了这个代码: int PaliPair(ch
python - 如何使用python删除图像中人物周围的白色边框/边缘？
我要删除黑色蒙版和人体图像之间的白色边框图像输入示例: 厚度为1的图像输出: 厚度为2的图像输出: 我尝试了一些在这里找到的具有模糊和阈值的游戏我还使用此代码查找和绘制轮廓 thickne
javascript - 边缘、悬停和单击
这应该是一个在用户悬停时打开的飞出菜单。这在 Chrome 中工作得很好，我已经尝试了多种方法(使用 CSS :hover，(mousenter)和(mouseleave ) 问题是 - 使用 Ed
apache - 边缘 Chrome 不会显示基本身份验证弹出窗口？
我有一个 Apache 服务器 v2.4.43 为我的网站提供服务，我使用一个简单的 .htpasswd，我使用指令“AuthUserFile ”在 .htaccess 中调用它来进行身份验证。现在
css - 创建剪辑路径波 css 边缘
如何仅使用剪辑路径创建波浪边缘？波浪应该是这样的图像: 最佳答案您应该通过波函数及其频率生成此剪辑路径。我用过 cos()在 PHP 中。您可以找到如下链接: https://repl.it/@
graphviz - 如何添加“不相关的”边缘
我有这张图： digraph G { 1 [label="car"]; 2 [label="x"]; 3 [label="car"]; 4 [label="y"]; 5 [label="cdr"];
graphviz - 用点强制正交(垂直或水平)边缘
我想强制点仅显示节点之间的垂直或水平边缘。我在帖子 Family tree layout with Dot/GraphViz 中发现了类似的请求，但我不处理树，所以我希望有一个解决方案，无需插入额外
python - 如何对齐重叠图中的直方图 bin 边缘
我已经设法让两个直方图重叠，但如果你仔细观察，条形开始倾斜并且没有完全重叠。我已经调整了线宽和宽度，并没有改善。我的目标是让所有的条形排列在彼此的顶部，黑边没有歪斜。有什么办法解决这个问题这是
python - 如何对齐重叠图中的直方图 bin 边缘
我已经设法让两个直方图重叠，但如果你仔细观察，条形开始倾斜并且没有完全重叠。我已经调整了线宽和宽度，并没有改善。我的目标是让所有的条形排列在彼此的顶部，黑边没有歪斜。有什么办法解决这个问题这是
latex 填充物/边缘 hell
我一直在与 latex table 搏斗太久了。我需要一个具有居中标题的表格，以及包含可能环绕的文本的正文单元格。由于环绕要求，我使用 p{xxx} 而不是 l 来指定单元格宽度。这导致的问题是单元格
java - 平滑 BufferImage 边缘
有没有办法平滑转换(平移和旋转)的 BufferedImage 的锯齿状边缘？测试图像的放大 View : (请注意，这不是将要使用的实际 BufferedImage，仅用于此处演示)。已使用双线
css - 子元素不继承父元素的 flex 边缘？
我在 my page 有一个旋转木马.我的父元素和子元素的边缘都是 flex 的，但是当您按“下一个”或“上一个”并滑动旋转木马时，子元素在移动时不会保持 flex 。我怎样才能避免这种情况？ .ho
html - 删除空白和粘性 div 边缘？
我在 .boxwrap 和 .lsmlbox + .rsmlbox 之间的嵌套 div 中添加了不必要的空格，这使得无法将 .smlbox + .rsmlbox 与 .box 对齐我相信这是一个比预期
swift - 绘制没有对角线的 SCNBox 边缘？
我正在使用 Apple 的 ARKit 制作 AR 应用程序，我想制作盒子的线框轮廓。代码中描述并显示在图片中的那个在盒子的每个面上绘制斜边。它还隐藏了盒子另一侧的角。 Scene Kit 中有没有办
c++ - opencv:如何填充区域外的区域/边缘
下图仅包含阈值处理后的黑色和白色像素。我在此图像的顶部绘制了一个灰色的旋转矩形。现在我想计算这个旋转矩形内的黑色像素数，但不包括白色矩形矩形外的黑色像素(即白色矩形内的像素数)。做到这一点的最佳方法
html - 边缘 CSS 属性
你们如何处理边际 CSS？我所说的边缘是指需要斜体或粗体的单个单词或短语。只用声明一个“大胆”的类似乎很愚蠢 Bold { font-weight: bold; } 或者斜体，要么! Italic
html - 如何去除网页底部的空白？ (IE/边缘)
好的。我知道有几十个类似的线程。我几乎检查了每一个，但找不到可行的解决方案。我试过负边距、最小高度、最大高度、绝对页脚、正文背景颜色，甚至将溢出:隐藏到页面中的所有主要容器。然后将 clearfix
html - 如何使所有跨浏览器兼容倾斜的 div 边缘？
我网站的一部分使用代码使用倾斜边缘: -webkit-clip-path: 多边形(0% 0%, 100% 0%, 81% 100%, 0% 100%) 这在 Chrome 中运行良好，但不适用于任何
html - IE(边缘)和谷歌浏览器中的图像对齐方式发生了变化
我一直在创建这个网站，并且进展顺利。然后我试着给它添加一个模态，但一切都有点走下坡路。问题是在添加模式后，Chrome 中的图像对齐方式发生了变化。它在 Edge 中运行良好。现在我知道这可能是因为
image - 图像上的刻度线是否有可能以像素的“边缘”为中心？
如果我在 Matlab 中使用 image() 命令制作一个 4 x 4 像素的图像，它会将刻度线居中放置在像素的中间。我希望刻度线以像素的左下角为中心。有什么方法可以做到这一点吗？最佳答案您可以

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 神秘边缘？