更改字体大小会在顶部添加额外的空间

问题描述 投票：0回答：1

我有一个导航栏，我在其中使用锚标记作为按钮。当字体大小为默认值时，一切都很好，但是当我稍微更改它时，它会在顶部添加一些空间，如图所示。

注意此空间在电脑上不可见，但在手机或其他宽度较小的设备上查看网站时可见。如果在手机横向模式下打开同一个网站，顶部的额外空间就会消失。

The problem:

这是html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Craze Course</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav">
        <h1 class='nav-elements' id="heading-1">Code Craze Course</h1>
        <a class="nav-elements" id="a-1" href="google.com">Enroll Now</a>
    </div>
</body>
</html>

这是CSS：

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: cadetblue;
}
.nav{
    width: 100%;
    height: 5vw;
    display: inline-flex;
    align-items: center;
}

#heading-1{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position:absolute;
    color: white;
    background-color: rgb(53, 53, 53);
    height: 5vw;
    font-size:3vw;
}
#a-1{
    color: white;
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    background-color: rgb(40, 89, 194);
    margin: 0 0 0 1vw;
    border-radius: 3px;
    border: 0.15vw solid rgb(189, 189, 189);
    padding: 0px 1vw;
    font-size: 1vw;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    height: 2vw;
}

我尝试更改行高，但没有帮助。但是将字体大小更改为默认值可以解决问题，但我需要字体大小大一点，所以不能将 t 保留为默认值。

请求-请不要将其标记为重复，因为我已经尝试过本文中给出的解决方案（字体大小增加了上边距），但它没有帮助。

html css font-size
1个回答
-1
投票

将 

position: absolute
和 
top: 0
应用于 
.nav
类。

.nav {
    position: absolute;
    top: 0;
}


*{
    margin: 0;
    padding: 0;
}
body{
    background-color: cadetblue;
}
.nav{
    width: 100%;
    height: 5vw;
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 0;
}

#heading-1{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position:absolute;
    color: white;
    background-color: rgb(53, 53, 53);
    height: 5vw;
    font-size:3vw;
}
#a-1{
    color: white;
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    background-color: rgb(40, 89, 194);
    margin: 0 0 0 1vw;
    border-radius: 3px;
    border: 0.15vw solid rgb(189, 189, 189);
    padding: 0px 1vw;
    font-size: 2vw;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    height: 2vw;
    line-height: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Craze Course</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav">
        <h1 class='nav-elements' id="heading-1">Code Craze Course</h1>
        <a class="nav-elements" id="a-1" href="google.com">Enroll Now</a>
    </div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.