Whitespace on top of website

Question

I have a whitespace on top of my website that i want to remove and dont know how:

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DevDoWeb.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="styleSheet.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <h3 class="headerText">Test</h3>
    </div>
  </body>
</html>

The dev tools tell me that it cant be maring, padding, or border.... i am really clueless on what to do here, any help is appreciated.

score 4 · Answer 1 · answered May 30 '18 at 07:53

In this case the white space is caused by the margin added from the browser stylesheet to h3. If you remove that by giving h3 a margin of 0, you get rid of the white space.

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

h3 {
  margin-top: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>DevDoWeb.com</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
  <link rel="stylesheet" type="text/css" href="styleSheet.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <div class="header">
    <h3 class="headerText">Test</h3>
  </div>
</body>

</html>

I just found out exactly that using the dev tools....i very much did NOT see the margin of the text itself :) Thanks, though. — griesgram, May 30 '18 at 07:59

score 2 · Answer 2 · answered May 30 '18 at 07:53

Try This:

h3 {
  margin: 0;
}

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

h3 {
  margin: 0;
}

<div class="header">
  <h3 class="headerText">Test</h3>
</div>

score 1 · Answer 3 · answered May 30 '18 at 07:53

1

In your CSS, make these changes

body {
border: 0;
padding: 0;
margin: 0;
}

.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
border: 0;
top: 0;

}

answered May 30 '18 at 07:53

Swastik Bhattacharyya

97
2
2
9

score 1 · Answer 4 · answered May 30 '18 at 08:16

You need to remove margin-top from the headerText

body {
border: 0;
padding: 0;
margin: 0;
}

.header {
width: 900px;
height: 100px;
background-color: #5132FF;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border: 0;
top: 0;

}
.headerText {
  margin-top: 0;
}

<div class="header"><h3 class="headerText">Test</h3>

score 0 · Answer 5 · answered May 30 '18 at 07:52

0

Add this on top of your css file.

* {
  margin: 0;
  padding: 0;
}

answered May 30 '18 at 07:52

Aryan Twanju

2,464
1
9
12

score 0 · Answer 6 · answered May 30 '18 at 07:59

0

I would strongly recommend using a reset style sheet, one like Eric Meyers. This link also explains what they are and why you should use them.

answered May 30 '18 at 07:59

Alex

8,875
2
27
44

I will look into this. Thanks. – griesgram May 30 '18 at 08:00

Whitespace on top of website

6 Answers6