Javascript 容器得到了不必要的余量_Javascript_Jquery_Html_Css

Javascript 容器得到了不必要的余量

javascript jquery html css

Javascript 容器得到了不必要的余量,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的html是：- <!DOCTYPE html> <html> <head> <meta charset="US-ASCII"> <link rel="stylesheet" type="text/css" href="css/index.css" > <title>Best company in the USA</title> </head> <body>

我的html是：-

<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<link
    rel="stylesheet"
    type="text/css"
    href="css/index.css"
>
<title>Best company in the USA</title>
</head>

<body>
    <div class="menu">
        <h2>MENU</h2>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <nav role="navigation">
        <div class="navWrap">
            <h2 class="navClose"></h2>
            <ul>
                <li><a href="somelink.com">Home</a></li>
                <li></li>
                <li><a href="somelink.com">About us</a></li>
                <li></li>
                <li><a href="somelink.com">
                        Services</a></li>
                <li></li>
                <li><a href="somelink.com">Locations</a></li>
                <li></li>
                <li><a href="somelink.com">Contact Us</a></li>
                <li></li>
            </ul>
        </div>
    </nav>

    <div class="content">
        <section class="first"></section>
    </div>

</body>

</html>

Jquery是：-

$(document) .ready(function () {

    windowHeight = 0.9 * $(window) .innerHeight();
    $('.first').height(windowHeight);
    $(window) .resize(function () {
        windowHeight = 0.9 * $(window) .innerHeight();
        console.log("height: " + windowHeight);
    });

});

所以，我现在面临一个特殊的问题。不知怎的，我在

内容

类中得到了8-10px或边距。我有一个解决办法。如果我在

.content

中注释掉css，它对我有效

但是，如果知道我天真的解决方案是否能变得更好，那就太好了。或者，如果有人能帮我指出额外利润的根本原因，那就太好了

下面是一个JSFIDLE：

谢谢。

您应该重置您的元素

只需添加：

* { margin: 0; padding: 0; }

为了确保您永远不会遇到像这样奇怪的样式问题，我建议使用css重置。它基本上会重置浏览器的默认样式，这样您就不会得到不需要的元素样式。我通常使用绿色菜单，但外面有很多。

嘿，滴滴，我想知道你能否指导我如何将绿色菜单放到红色部分的后面。如果发生这种情况，我将单击菜单按钮，详细信息将从后面显示。您可以就此问另一个问题，但请回答：

* { margin: 0; padding: 0; }