首页 文章

<html>元素大于<body>

提问于
浏览 次
1

我正在构建一个简单的反应应用程序这是渲染后的index.html：

<html><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello react!</title>
  <link rel="stylesheet" href="./dist/styles/main.css" type="text/css">
</head>
<body>
<div id="App"><div data-reactroot="" class="navbar"><p>This will be the navbar</p></div></div>
<script src="./dist/components/main.js"></script>

<style>
  body {
    margin: 0;
  }
</style>
</body></html>

到目前为止我在main.css文件中唯一的裁决：

.navbar{
  background-color:blue
}
#App{
  height:500px;
  background-color:pink
}

在我的身体标签开始之前有一些空白区域会发生什么 . 在我的html和body标签上似乎没有边距或填充，但是不是从页面顶部开始，主体刚开始几个像素......

所以 <html> 是400x516px，而 <body> 是400x500px . 我希望身体完全填充html元素 .

如果您需要更多信息，请询问或查看git repo . 运行 npm run start 将在8080打开服务器 .

谢谢您的帮助 .

html css

4 回答

  • 3

    你的问题是p标签从浏览器自动获得一个保证金，只需设置 p{margin:0} 就可以了 .

    或者从导航栏中删除 <p> ，因为我猜html最后会有其他内容 .

    回复于
  • 0

    每个浏览器都有默认样式 . 所以如果你不使用重置css - 其他元素的主体和段落以及批次都有边距和填充等等所以 body,p {margin:0} 是你的朋友

    回复于
  • 0

    浏览器会在每个 <p> 元素之前和之后自动添加一些边距 . 可以使用CSS修改边距 .

    所以，设定，

    p{
margin:0;
}
    回复于
  • 0

    尝试这样的事情 .

    p,body{margin:0}
    回复于

相关问题