HTML-页面顶部的角空白-堆栈溢出

顺晟科技

2022-10-19 12:57:56

144

我最近创建了一个Angular项目，页面顶部有一个红色导航条。

开始时导航栏直接在页面的顶部，但后来我意识到在上面创建了一个小空白。

然后我发现我可以突出显示一部分空格，并认为这不是CSS问题，而是错误放置的空格。

空白照片:

navbar上方的空白

检查突出显示区域时控制台的照片:

控制台：检查空白

我认为这个问题可能是由“ ”引起的但我不知道如何在HTML文件中找到它。

以下是我的index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MediStockWeb</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
 
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

app.component.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MediStockWeb</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
 
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

app.component.scss:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MediStockWeb</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
 
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

不胜感激！

顺晟科技：

我认为它是路由中显示的组件中的某些内容，或者是包含的脚本之一。即使元素是body-ok类型之一.

也不是很好的做法，即使它们是

如果非要我猜的话，我会说您在构建中的某个地方包含了ej2的脚本。它可能认为必须添加样式表元素，但这样做不恰当。

上一篇：Python-如何获取异常消息，然后下一篇：HTML-用多个模态关闭Blazor

网站建设

Html

HTML-页面顶部的角空白-堆栈溢出