时间戳

首页 > 解决方案 > IDE插入空白和浏览器将它们读取为char如何摆脱它？我正在使用 VSCode

html - IDE插入空白和浏览器将它们读取为char如何摆脱它？我正在使用 VSCode

问题描述

当我尝试制作导航栏时，空间出现问题，我不知道它来自哪里！

我将边距设置为 0 并且填充什么也没发生也没有发生 box-sizing 到border-box 没有运气！

1：在此处输入图像描述

*::after,
*::before {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: darkblue;
}

nav {
    width: 100%;
    background-color: #f8f8f8;
    border-bottom: 1px #e7e7e7 solid;
    color: #777;
}

.logo,
.navbar {
    display: inline;
}

.logo {
    padding: 20px;
}

.navbar {
    width: 100%;
}

.navbar li {
    list-style-type: none;
    display: inline-block;
    padding: 20px;
}

标签： htmlcssvisual-studio-code

解决方案

由于这些元素之间有一个“原生”间距，你可以给你的nav-item类一个负边距，如下所示：

.nav-item {
  margin: -7px;
}

并且由于这样做可能会影响父元素<nav>，您可以手动设置父元素的高度，因此它将元素保持在您想要的高度（或大小）：

nav {
    width: 100%;
    background-color: #f8f8f8;
    border-bottom: 1px #e7e7e7 solid;
    color: #777;
    height: 55px; /*This property should set the height to your nav element*/
}

希望能帮助到你！

推荐阅读