元素获得不必要的余量

Question

如您所见，导航元素的顶部填充有点太多。虽然链接的轮廓是在正确的位置，但还是有点烦人 space。这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>'''+title+'''</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/>
        <link rel="icon" type="image/x-icon" href="/favicon.ico"/>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <style>
            @import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
            html, body {
            margin: 0;
            background: #333333;
            height: 100%;
            position: relative;
            font-family: "merriweather";
            overflow-y: hidden;
            }
            h1 {
            font: bold 40pt roboto, arial, sans-serif;
            margin: 0;
            background: yellow;
            padding: 30px;
            }
            nav {
            display: inline-block;
            }
            nav a {
            cursor: pointer;
            font: bold 18px roboto;
            display: inline-block;
            transition-duration: 0.2s;
            padding: 15px 30px;
            background: linear-gradient(
            #FF9900, #FF9900 50%, #333333 50%, #333333
            /*outline: none;*/
            );
            background-size: 100% 200%;
            color: black;
            }
            nav a:hover {
            background-position: 100% 100%;
            color: yellow;
            }
            nav a:focus {
            outline:none;
            }
            #content-white-bkg {
            background: white;
            padding: 30px;
            margin: 15px;
            box-sizing: border-box;
            overflow-y: scroll;
            }
            *:not(nav) > a:link {
            cursor: pointer;
            color: #FF9900;
            transition-duration: 0.35s;
            /*border-bottom: 1px solid #FF9900;*/
            }
            *:not(nav) > a:visited {
            color: #FF6600;
            cursor: pointer;
            transition-duration: 0.35s;
            }
            *:not(nav) > a:hover, *:not(nav) > a:focus {
            color: black;
            outline: none;
            }
            a {
            text-decoration: none;
            color: black;
            }
            nav > a.selected {
            background: #333333;
            color: yellow;
            text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;
            transition-duration: 0.5s;
            }
            nav > a.selected:hover {
            color: #333333;
            }
            ::selection {
            background: #FF7700;
            }
            ::-webkit-selection {
            background: #FF7700;
            }
            ::-moz-selection {
            background: #FF7700;
            }
            h3 {
            font: bold 18px nunito;
            margin-top: 0;
            }                
        </style>
    </head>
    <body>
        <h1 title='MUCAS: Multi-User Chat Application Server'>
            <span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span>
            <nav><a href="/" id="nav-/" tabindex="-1">Home/chat</a><a href="/login" id="nav-/login" tabindex="-1">Log in</a><a href="/sign-up" id="nav-/sign-up" tabindex="-1">Sign up</a><a href="/about" id="nav-/about" tabindex="-1">About MUCAS</a><a href="/contact" id="nav-/contact" tabindex="-1">Contact me</a></nav>
        </h1>
        <div id="content-white-bkg">
            '''+body+'''
            <script>
                var cwb = document.getElementById("content-white-bkg");
                document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
                window.onresize = function() {
                    document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
                }
                var path = window.location.pathname;
                document.getElementById("nav-"+path).className = "selected";
            </script>
        </div>
    </body>
</html>

有人可以帮我解决这个问题吗？是布局问题还是其他问题？

Answer 1

试试这个：

nav a {
  vertical-align: top;
}

Answer 2

检查浏览器中的开发者工具。 Select 导航元素并查看与该元素关联的 CSS 面板。查看继承样式和计算样式。导航上的边距或填充是否继承？也许它是它的父元素或子元素被计算为零。这可以是链接、列表、列表项或父项。如果你可以使用 flexbox，我强烈推荐它来对齐组件和布局。

Answer 3

你可以试试

nav {
   vertical-align: super;
}

"vertical-align: super" 会将您的 "nav" 视为上标。我试着把它放在你的代码中，发现它有效。如果您认为它可以解决您的问题，您可以尝试一下。谢谢

Answer 4

这应该可以解决问题：

nav a {
    float: left;
}

为了语义，我还应该将 h1 更改为 div 元素。 h1 用于例如页面标题而不是将导航栏和徽标包装在..

Answer 5

你在这里做错了几件事。您正在将导航项和图像放置在 header 元素内。您没有为要浮动的元素使用浮动。

改用周围的符号。

我做了一个 jsfiddle 说明浮动，但没有纠正语义。

考虑改为这样做：

<div class="header">
<img src="image.jpg">
<nav>...links here...</nav>
</div>

元素获得不必要的余量

Element getting unnecessary margin

html

css

margin