Html 添加文本时，背景图像与导航栏的距离如何？_Html_Css

Html 添加文本时，背景图像与导航栏的距离如何？

html css

Html 添加文本时，背景图像与导航栏的距离如何？,html,css,Html,Css,我试图在背景图像上添加文本，但这会导致背景图像与导航栏之间的距离增加以下是HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

我试图在背景图像上添加文本，但这会导致背景图像与导航栏之间的距离增加以下是HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>ElectroLand</title>
</head>
<body>
<!--Navbar Starts ====================================== -->
    <header>     
        <div class="container">
                <nav>
                    <div class="logo"><img src="/img/logo.png"></div>
                    <div class="nav-list">
                        <ul class="nav-item"><li><a href="#">Home</a></li></ul>
                        <ul class="nav-item"><li><a href="#">Products</a></li></ul>
                        <ul class="nav-item"><li><a href="#">About</a></li></ul>
                        <div class="hamburger" onclick="clk()" id="burger">
                            <div id="line1"></div>
                            <div id="line2"></div>
                            <div id="line3"></div>
                        </div>
                    </div>
                </nav>
           </div>
           <div class="sidemenu" id="sdmenu">
            <div class="side-items">
                <ul class="side-item"><li><a href="#">Home</a></li></ul>
                <ul class="side-item"><li><a href="#">Products</a></li></ul>
                <ul class="side-item"><li><a href="#">About</a></li></ul>
            </div>
        </div>
    </header>
    <script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
    <h1>Welcome to the Land of Electronics</h1>
</div>
</body>
</html>

我一直在研究这些代码。我在调整大小和背景图像方面遇到了很多问题，但我可以解决它们，非常感谢。但这是新的。我该怎么办？这就是我所说的丑陋的结果：

h1元素上的默认边距导致出现空白。将您的.mid部分设置为flexbox，以便进行简单修复：

中段{ 背景图片：url/img/background.jpg；背景位置：中心；背景尺寸：封面；宽度：100vw；高度：100vh；显示器：flex；证明内容：中心； } h1元素上的默认边距导致出现空白。将您的.mid部分设置为flexbox，以便进行简单修复：

中段{ 背景图片：url/img/background.jpg；背景位置：中心；背景尺寸：封面；宽度：100vw；高度：100vh；显示器：flex；证明内容：中心； }

在您的情况下，最好的选择是重置默认情况下由浏览器应用于图元的边距和填充。这里有一个重置一切的好方法。请注意，如果使用此选项，则必须添加自定义填充和边距。基本上，它选择所有元素，并将它们的边距和填充设置为0

这是最佳实践：

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

另一种选择是只删除h1的边距

这将在不破坏您的设计的情况下解决您的问题。尽管我更喜欢第一个选项，因为这是每次添加新元素时都会遇到的常见问题。

在您的情况下，最好的选项是重置浏览器默认应用于元素的边距和填充。这里有一个重置一切的好方法。请注意，如果使用此选项，则必须添加自定义填充和边距。基本上，它选择所有元素，并将它们的边距和填充设置为0

这是最佳实践：

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

另一种选择是只删除h1的边距

这将在不破坏您的设计的情况下解决您的问题。尽管我更喜欢第一个选项，因为这是您每次添加新元素时都会遇到的常见问题。

我无法理解您在图像中显示的问题。是否可以包含中间部分的代码？该空间看起来像h1元素上的默认边距。一句话也说不出来。哦，对了。他没有重置。我无法理解您在图像中向我们显示的问题。是否可以包含中间部分的代码？该空间看起来像h1元素的默认边距。一句话也说不出来。哦，对了。他没有重置，它成功了，谢谢。但愿我把两个答案都标为正确答案，但我在你们面前看到了另一个答案。我将使用这两种方法。显示和重置h1页边距，我将选择其中最好的。成功了，谢谢你。但愿我把两个答案都标为正确答案，但我在你们面前看到了另一个答案。我将使用这两种方法。显示和重置h1页边距，我将选择其中最好的。

h1 {
margin: 0
}