导航栏上方的空间?

时间:2015-10-23 13:10:18

标签: html css navbar

我目前在导航栏上方有一个间隙,我不确定如何删除它。有任何想法吗?我希望在导航栏上方有大约5-10px的间隙。我认为需要新的眼睛才能查看我的代码。

HTML:

<body>

        <!--  Naigation Code  -->
            <nav class="navigation-main">
                <ul class="navigation-right">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Forum</a></li>
                </ul>
            </nav>
<div class="homepage-container">
            <h2 class="navigation-logo">Code Depot</h2>
<br>
<i class="fa fa-angle-double-down" style="font-size: 40px; color: #FFFFFF; margin-top: 55px; margin-bottom: 20px;"></i>

CSS:

li {
    list-style-type: none;
    text-decoration: none;
}

.navigation-main ul li {
    display: inline;
    padding: 10px;
    border-radius: 2px;
    float: right;
}
.navigation-main ul li a {
    color: #ffffff;
}
.navigation-main ul li a:hover {
    color: #ffffff;
}
.navigation-right {
    float: right;
    font-size: 18px;
}

/*Icon CSS*/

.large-icon {
    font-size: 1.5em;
}

/*Logo CSS (15 inch display)*/

.navigation-logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    color: #FFFFFF;
    font-size: 85px;
    padding-top: 200px;
    text-align: center;
}

/*

.button-logo{
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    padding: 18px;
    border-radius: 8px;
    border: solid #ffffff;
    font-weight: 50;
}
.button-logo {
    transition: all 0.25s ease-in-out;   /* Hover off */
}/*
.button-logo:hover {
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    transition: all 0.2s ease-in;         /* On hover */
}

/*Footer CSS*/

.footer-main{
    margin-top: 125px;
    margin-left: 10px;
}
.footer-main-right{
    float: right;
    margin-right: 10px;
}

/*Content CSS*/
.homepage-container{
    text-align:center;
    margin:auto;
}
.white-info{
    font-size: 20px;
    text-align: center;
}
.white-info-title{
    text-align: center;
    margin-top: 80px;
}


.white-background {
    position: relative;
    background: white;
    width: 100%;
    height: 450px;
    margin: 0 auto;
    padding: 20px;
    resize: both;
    overflow: auto;
    color: black;
    font-size: 40px;
}

帮助将是100%赞赏的人。

感谢您提供帮助:D

2 个答案:

答案 0 :(得分:4)

只是一个猜测,但我认为你还没有删除整个页面的标准边距。

尝试添加此内容:

*, body {
    margin: 0px;
    padding: 0px;
}

答案 1 :(得分:-2)

保证金和填充为0对您没有帮助。使用:

body { float: left; } 

这应该可以解决您的问题。 以下是一个示例:https://jsfiddle.net/77275ae9/