I created a header with <div></div>
in html, but when I tested it there is a white outline around header. I created header in <head></head>
.
Image of header: header
HTML code of my site:
.header {
padding: 20px;
text-align: left;
background-color: skyblue;
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html>
<title>
NetPlat
</title>
<head>
<div >
<a href="login.php">
<button style="float: right;">Logout</button>
</a>
<h1>Home Page</h1>
</div>
<style>
</style>
</head>
<body>
</body>
</html>
CodePudding user response:
It's related to your browser's default styling. So you can remove the margin from the body element:
body {
margin: 0
}
CodePudding user response:
This is something related to default browser styles. Basically, it is a set of styles that are added by the browser to the pages. A simple solution is to reset the margin, padding, and box-sizing like the following snippet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
But for a larger scale website, I do suggest using josh wcomeau reset code snippet:
/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
html, body {
height: 100%;
}
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
7. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
Related Links: