css - HTML - CSS(页眉)

标签 css html

<分区>

我开始使用 html 和 css,但遇到了问题。我有 header ,它在浏览器和 header 本身之间有一些空间我希望你明白我在说什么。它只是背景上的一个矩形。

body{
  background-image:url(bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

header{
  background-color:#000;
  padding: top;
  min-height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PaginaWeb</title>
    <script src="External_Java.js"></script>
    <link rel="stylesheet" type="text/css" href="Style.css">
     
</head>

<body>

   <header>
       <nav>
           <p>text</p>
        </nav>
    </header>
    
</body>

</html>

最佳答案

默认情况下,每个浏览器都包含默认的填充和边距属性。因此,您需要将它们重置为零以避免此类问题。

通过在脚本的开头添加此声明:

* {
    padding:0;
    margin:0;
}

您将重置 all 元素的 padding 和 margin 属性,这就是 * 所代表的。

*{
    margin:0;
    padding:0;
 }


body{
  background-image:url(bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
}

header{
  background-color:#000;
  padding: 0;
  min-height: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PaginaWeb</title>
    <script src="External_Java.js"></script>
    <link rel="stylesheet" type="text/css" href="Style.css">
     
</head>

<body>

   <header>
       <nav>
           <p>text</p>
        </nav>
    </header>
    
</body>

</html>

关于css - HTML - CSS(页眉),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50659410/

上一篇:html - CSS 弧形按钮

下一篇:css - 背景图片未显示

相关文章:

html - 帮助 css Float

javascript - ondragenter 提醒容器的 .id

javascript - 附加尾部选择选项以维持功能

html - Bootstrap Carousel 问题 - 顶部闪烁的元素

css - Laravel 5.6 Bootstrap Jumbotron 背景图片

css - 如何像使用 px 一样简单地使用和管理相对字体值

html - 是否有一种纯 CSS 方式可以在 2 个单独的有序列表中继续有序列表编号?

html - 垂直居中对齐列表中的图像和文本

jquery - 如何在jquery中双击点击和取消计数

css - 任何 iOS 网络浏览器是否通过 CSS 支持 OpenType 字体功能?