无法解释的空白?

编程入门行业动态更新时间:2024-10-17 23:22:08

本文介绍了无法解释的空白?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我只是在编写一些简单的代码，但结果中似乎有一个无法解释的空格...而且我似乎不能失去它！

要清楚:我的意思是紫色标题和白色导航属性之间的线".

我尝试去掉代码中的制表符和空格，但没有帮助.

这是一个简单的小提琴:http://jsfiddle/LNhK5/

HTML:

<div id="包装器"><标题><img class="logo" src="images/logo.png"></标题><nav id="mainMenu"><ul><li>Nieuwsoverzicht</li><li>趋势</li><li>Lokaal nieuws</li></nav>

CSS:

body{背景颜色:#ebebeb;保证金:0;填充:0;}#包装器{宽度:100%；填充:0;保证金:0;}标题{背景色:#835497;高度:70px；宽度:100%；保证金:0;填充:0;}.标识{高度:80%；显示:块；边距:0 自动 0 自动；}导航{背景色:#ffffff;高度:45px；宽度:100%；保证金:0;填充:0;}导航#mainMenu ul li{字体系列:'source_sans_proregular';字体大小:1.2em；颜色:#c2c2c2；显示:内联块；文字对齐:居中；保证金:0;填充:0;}

是我忽略了什么，还是我只是打错了字?

解决方案

也许你所说的空格是由 ul 引起的?

jsfiddle

尝试将边距设置为零:

ul {边距:0；}

I'm just coding something simple, but there seems to be an unexplainable whitespace in my result... And I can't seem to lose it!

To be clear: I mean the 'line' between the purple header and the white nav-attribute.

I tried getting rid of the tabs and spaces in my code, but it did not help.

Here's a simple fiddle: http://jsfiddle/LNhK5/

HTML:

<body>

<div id="wrapper">

    <header>
        <img class="logo" src="images/logo.png">
    </header>

    <nav id="mainMenu">
        <ul>
            <li>Nieuwsoverzicht</li>
            <li>Trending</li>
            <li>Lokaal nieuws</li>
        </ul>
    </nav>
</div>
</body>

CSS:

body{
    background-color:#ebebeb;
    margin:0;
    padding:0;
}

#wrapper{
    width:100%; 

    padding:0;
    margin:0;
}

header{
    background-color:#835497;

    height:70px;
    width:100%;

    margin:0;
    padding:0;
}

.logo{
    height:80%;

    display:block;
    margin: 0 auto 0 auto;
}

nav{
    background-color:#ffffff;

    height:45px;
    width:100%;

    margin:0;
    padding:0;
}

nav#mainMenu ul li{
    font-family:'source_sans_proregular';
    font-size:1.2em;
    color:#c2c2c2;

    display:inline-block;
    text-align:center;
    margin:0;
    padding:0;

}

Is it something I'm overlooking, or did I just make a typo-error?

解决方案

Perhaps the whitespace you are talking about is due to the ul ?

jsfiddle

Try setting the margin to zero: