代码之家 › 专栏 › 技术社区 › Robert Moore

元素获取不必要的边距

margin css html

Robert Moore · 技术社区 · 10 年前

如您所见,nav元素的顶部填充有点过多。尽管链接的轮廓在正确的位置,但只有额外的烦人空间。这是我的代码:

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

有人能帮我吗?是布局问题还是其他问题?

5 回复 | 直到 10 年前

ralph.m 10 年前

试试看:

nav a {
  vertical-align: top;
}

Erik Isaksen 10 年前

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

Raihan Taher 10 年前

你可以试试

nav {
   vertical-align: super;
}

“verticalalign:super”会将您的“导航”视为上标。我试着把它放到你的代码中,发现它有效。如果你认为它能解决你的问题,你可以试试。谢谢

Koen 10 年前

这应该可以做到:

nav a {
    float: left;
}

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

Valross.nu 10 年前

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

请改用环绕。

我做了一个 jsfiddle 在不修正语义的情况下示出浮动。

请考虑这样做:

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