Having trouble getting rid of white space around my body element. I am setting margin and padding to 0 in both my css and html, but when I run the application the body has a margin of 8px. When I look in the developer tools it says the body styles is coming from User Agent Stylesheet. I think my problem has something to do with that. Any help would be greatly appreciated!
html {
overflow: hidden;
background-size: 100% 100%;
background-color: lightgrey;
margin-bottom: 0;
margin: 0;
padding: 0;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #22aedc;
overflow: hidden;
height: 60px;
}
/* Style the links inside the navigation bar */
.topnav h2 {
color: #FFFFFF;
text-align: center, center;
align-content: center, center;
//padding: 4px 10px;
text-decoration: none;
font-size: 21px;
font: "Tahoma";
overflow: hidden;
}
footer {
font: "Tahoma";
font-size: 13px;
opacity: 0.8;
}
body {
background-image: url('/Angular/src/assets/img/kraft.png');
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 330px;
background-attachment: fixed;
margin: 0;
overflow: visible;
padding: 0;
}
.dv-panel {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
background: #f6f8f9;
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}
.dv-menuPanel {
@extend .dv-panel;
background: #f9f9f9;
max-width: 1200px;
margin: auto;
// Added 'row' class to make height match
// that of children
//overflow: hidden;
.dv-menuPanelContent {
min-height: 300px;
background: white;
padding: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
.menuPanelHeader {
background: #5bc0de;
color: white;
h3 {
padding: 10px;
margin-top: 0;
}
}
.menuPanelHeaderAlt {
color: #555;
h3 {
padding: 10px;
margin-top: 0;
//font-size: 32px;
}
}
.contentPanelHeaderAlt {
color: #555;
}
}
}
.dv-panel, .dv-menuPanel, .dv-menuPanelAlt {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
background: #f6f8f9;
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
}
.dv-panel {
padding: 10px;
text-align: center;
border: 1px solid darkgray;
box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
background: #f6f8f9;
}
.dv-button {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 17px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
}
.dv-button:hover {
background-color: #EEE;
color: black;
}
.db-button:active {
background-color: aqua;
color: white;
}
.plant-button {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 10px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 14px;
}
.plant-button:hover {
background-color: #EEE;
color: black;
}
.plant-button:active {
background-color: aqua;
color: white;
}
.pagination {
display: block;
background-color: white;
border-color: white;
padding: 10px 16px;
width: 50px;
border: 1px solid transparent;
outline: none;
text-align: center;
cursor: pointer;
transition: 0.3s;
color: grey;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
border-top: 40px;
}
.pagination:hover {
background-color: #EEE;
color: black;
}
.pagination:active {
background-color: aqua;
color: white;
}
#back {
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px;
background-color: #008cba;
border-color: #0079a1;
color: white;
cursor: pointer;
border: 1px solid transparent;
font-weight: 400;
text-align: center;
display: inline-block;
padding: 8px 12px;
outline: none
}
#back:hover {
background-color: white;
color: black;
}
#back:active {
background-color: #6e6d6f;
color: white;
}
.import-header {
display: block;
background-color: #5bc0de;
border-color: #46b8da;
padding: 17px 16px;
width: 100%;
border: 1px solid transparent;
outline: none;
text-align: center;
transition: 0.3s;
color: white;
white-space: nowrap;
box-sizing: border-box;
font-weight: 400;
margin-bottom: 8px;
font: Tahoma;
font-size: 15px;
}<html>
<head>
<link rel="stylesheet" href="/Angular/src/assets/css/fontawesome.min.css" />
</head>
<body style="background-color: lightgrey; width: 100%; margin: 0px; padding: 0px">
<div style="padding-top: 5px; padding-left: 5px; padding-right: 5px">
<div class="topnav">
<h2 style="text-align: center">Import</h2>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
<div *ngIf="!isTypeCollapsed" style="justify-content:center; padding-top: 155px; padding-bottom: 375px">
<div class="dv-panel" style="width: 400px; margin: auto; padding-bottom: 2px">
<div *ngFor="let type of types">
<button (click)="togglePlants(type)" class="dv-button">
{{type}}
</button>
</div>
</div>
</div>
<div *ngIf="isPlantsCollapsed" style="justify-content:center; padding-top: 125px; padding-bottom: 129px">
<div class="dv-panel" style="width: 400px; margin: auto; overflow: hidden; margin-left: 733px">
<button (click)="toggleBack()" class="far fa-arrow-left" id="back"></button>
<div *ngFor="let plant of plants">
<button class="plant-button" (click)="hidePlants(plant)">{{ plant }}</button>
</div>
</div>
</div>
<div *ngIf="isImportPageCollapsed" style="justify-content:center; padding-top: 165px; padding-bottom: 283px">
<div class="dv-panel" style="width: 400px; height: 300px; margin: auto; padding-bottom: 100px; background-color: #f9f9f9">
<button (click)="toggleBackFromImportPage()" class="far fa-arrow-left" id="back"></button>
<button (click)="toggleHome()" class="far fa-home" id="back" style="margin-left: -9px"></button>
<div>
<button class="import-header">
{{ importPlant }} ~ {{importType}}
</button>
<div class="form-group" style="width: 370px; margin: auto 0px auto 0px; position: relative; display: block; padding-top: 30px; padding-bottom: 45px; align-content: center">
<div class="input-group" style="margin-right: 125px; position: relative; display: table; border-collapse: separate">
<span class="input-group-addon fad fa-file-search" style="display: table-cell; background: #5bc0de; color: white; font-size: 14px; padding: 10px 12px"></span>
<input [value]="file?.name" class="form-control" readonly type="text" style="text-align:justify; padding: 10px 90px; outline: none; box-sizing: border-box; background-color: #EEE; opacity: 1; border: 1px solid #ccc">
<label style="opacity: 0; width: 100%; position: absolute; height: 100%; top: 0; left: 0; z-index: 999; cursor: pointer; outline: none; background-color: #f9f9f9">
<input style="position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; align-items:baseline; text-align: center" id="fileInput; background-color: #f9f9f9" type="file" accept=".xls,.xlsx" hidden (change)="getFileDetails($event)">
</label>
</div>
</div>
<div style="padding-left: 140px">
<button (click)="onImportClick()" class="dv-button" style="width: 100px; padding: 4px 6px">
Import
</button>
</div>
</div>
</div>
</div>
<footer style="padding-top: 0px; padding-bottom: 7px; text-align:center">
<p>Version 1.0.0 © 2021 DreamVersion, LLC.</p>
</footer>
</body>
</html>INDEX.HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="margin: 0px !important; padding: 0px !important">
<app-root></app-root>
</body>
</html>