删除正文和页脚html之间的奇怪空格_Html_Css_Header_Margin_Footer

删除正文和页脚html之间的奇怪空格

html css

删除正文和页脚html之间的奇怪空格,html,css,header,margin,footer,Html,Css,Header,Margin,Footer,我不熟悉HTML5和CSS3，更不熟悉flexbox。请帮我删除正文和页脚之间不需要的空格我已经在stackoverflow和google中搜索过了，但是没有任何效果。他们都建议检查我的利润率，我确实检查了所有的利润率，但没有结果。尝试调整大部分分区的边距、填充和边框，但仍然找不到罪魁祸首铬： index.html 编辑：这是我在Firefox中得到的。此外，按照其中一条注释中的建议，将页脚移到body标记内。编辑2：我把我的代码复制到Codepen，看到了这些奇怪的字符。当我删除它们

我不熟悉HTML5和CSS3，更不熟悉flexbox。请帮我删除正文和页脚之间不需要的空格

我已经在stackoverflow和google中搜索过了，但是没有任何效果。他们都建议检查我的利润率，我确实检查了所有的利润率，但没有结果。尝试调整大部分分区的边距、填充和边框，但仍然找不到罪魁祸首

铬：

index.html

编辑：这是我在Firefox中得到的。此外，按照其中一条注释中的建议，将页脚移到body标记内。

编辑2：我把我的代码复制到Codepen，看到了这些奇怪的字符。当我删除它们时，它解决了我的问题。但是看看我的编辑器（我已经试过Supreme和Notepad++了），里面没有特殊字符！！！这让我快发疯了。

请试试这个。正文和页脚之间不需要的空格，因为在div end中可以看到一些虚线字符，即（………）

正文{
边际：0px；
字体系列：无衬线；
}
.柔性容器{
/*flexbox属性*/
显示：-webkit flex；
-webkit柔性方向：行；
}
.弹性项目{
/*flexbox属性*/
显示：-webkit flex；
对齐项目：居中；
证明内容：中心；
}
.标题{
高度：50px；
背景色：番茄；
保证金：0；
边框底部：3倍实心rgba（0,0,0,0.3）；
}
保险商实验室{
证明内容：柔性端；
}
.导航{
弯曲方向：行；
保证金：2倍；
填充：0 10px 0 10px；
背景色：rgba（0,0,0,0.2）；
颜色：白色；
}
.内容{
高度：300px；
保证金：0；
}
.侧边栏{
背景颜色：灰色；
弹性：1；
}    
梅因先生{
背景颜色：浅灰色；
弹性：2；
}
页脚{
高度：50px；
边框顶部：3倍实心rgba（0,0,0,0.3）；
背景色：番茄；
}



关于
链接
联系

边栏
这是内容

这是内容

这是内容

这是内容

边栏
页脚在这里

这里是html的问题



关于
链接
联系

边栏
这是内容

这是内容

这是内容

这是内容

边栏
页脚在这里

我无法重现这个问题，没有我的空间。这种情况是否发生在特定浏览器上？

页脚

应位于

正文

tag@SuperUser试过了，没有work@OvidiuUnguru我不知道为什么。我用的是ChromeHello，谢谢，效果很好！不过，你能告诉我你换了哪一部分吗？我找不到，我接受了你的回答。我意识到你没有修改密码。你知道为什么会有不想要的角色吗？这是第一次发生这种情况，我一直在用不同的语言使用SublimateText。@reiallenramos我已经删除了代码片段中可见的点状字符。您错误地键入了额外的字符，而这在sublime中不可见，因为您尚未安装插件。为此，请点击此链接

<body>
    <div>
        <ul class="header flex-container">
            <li class="nav flex-item">About</li>
            <li class="nav flex-item">Links</li>
            <li class="nav flex-item">Contact</li>
        </ul>
    </div>


    <div class="content flex-container">
        <div class="sidebar flex-item">Sidebar</div>
        <div class="main flex-item">
        This is the content<br />
        This is the content<br />
        This is the content<br />
        This is the content<br />
        </div>
        <div class="sidebar flex-item">Sidebar</div>
    </div>
</body>
<footer>footer here</footer>

body{
    margin: 0px;
    font-family: sans-serif;
}

.flex-container{
    /* flexbox properties*/
    display: -webkit-flex;
    -webkit-flex-direction: row;
}

.flex-item{
    /*flexbox properties*/
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.header{
    height: 50px;
    background-color: tomato;
    margin: 0;
    border-bottom: 3px solid rgba(0,0,0,0.3);
}

ul{
    justify-content: flex-end;
}

.nav{
    flex-direction: row;
    margin: 2px;
    padding: 0 10px 0 10px;
    background-color: rgba(0,0,0,0.2);
    color: white;
}

.content{
    height: 300px;
    margin: 0;
}

.sidebar{
    background-color: grey;
    flex: 1;
}    

.main{
    background-color: lightgrey;
    flex: 2;
}

footer{
    height: 50px;
    border-top: 3px solid rgba(0,0,0,0.3);
    background-color: tomato;
}

<body>
    <div>
        <ul class="header flex-container">
            <li class="nav flex-item">About</li>
            <li class="nav flex-item">Links</li>
            <li class="nav flex-item">Contact</li>
        </ul>
    </div>


    <div class="content flex-container">
        <div class="sidebar flex-item">Sidebar</div>
        <div class="main flex-item">
        This is the content<br />
        This is the content<br />
        This is the content<br />
        This is the content<br />
        </div>
        <div class="sidebar flex-item">Sidebar</div>
    </div>
    <footer>footer here</footer>
</body>