All geek questions in one place

Space at the top of the document when filling and marking in 0px

I have a div as the first element on my page. However, approximately 20 pixels of space separate it from the top of the page.

I found as a supplement, and the marker tags <body>and <html>zero:

html, body {
  padding: 0px;
  margin: 0px;
}

However, spaces continue to show:

space approximately 20px

Checking the document in the dev browser tools shows that:

  • The body occupies only the orange region.
  • An item <html>takes up everything including spaces
  • Spaces are exactly 21.437px

As a fix bit, I added this rule in css to remove the space:

html {
  margin-top: -21.437px;
}

But this seems like bad code to me. Is there a more proper / elegant way to fix this, or is there something I am missing?

Full code:

html, body {
  padding: 0px;
  margin: 0px;
}

body { /* Note removing this rule does not fix the problem */
  margin: auto;
}

.header-background {
  background-color: #FFC107;
  width: 100;
}

.content {
  width: 1024px;
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <!-- CSS -->
    <link href="css/main.css" rel="stylesheet">
    
    <!-- JavaScript -->
    <script src="js/jquery/jquery-2.1.4.min.js" defer></script>
  </head>
  <body>
    <div class="header-background">
      <div class="content">
        <h1>Header text</h1>
        <p>Supporting text</p>
        <a href="about.html" role="button">Learn more &raquo;</a>
      </div>
    </div>
	</body>
</html>
Run codeHide result
+4
2

.content h1 , 0px:

html, body {
  padding: 0px;
  margin: 0px;
}

body { /* Note removing this rule does not fix the problem */
  margin: auto;
}

.header-background {
  background-color: #FFC107;
  width: 100;
}

.content {
  width: 1024px;
  margin: 0 auto;
}
.content h1 {
  margin:0px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <!-- CSS -->
    <link href="css/main.css" rel="stylesheet">
    
    <!-- JavaScript -->
    <script src="js/jquery/jquery-2.1.4.min.js" defer></script>
  </head>
  <body>
    <div class="header-background">
      <div class="content">
        <h1>Header text</h1>
        <p>Supporting text</p>
        <a href="about.html" role="button">Learn more &raquo;</a>
      </div>
    </div>
	</body>
</html>
Hide result
+3

html, body * . margin padding.

* {
  padding: 0px;
  margin: 0px;
}

body { /* Note removing this rule does not fix the problem */
  margin: auto;
}

.header-background {
  background-color: #FFC107;
  width: 100;
}

.content {
  width: 1024px;
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <!-- CSS -->
    <link href="css/main.css" rel="stylesheet">
    
    <!-- JavaScript -->
    <script src="js/jquery/jquery-2.1.4.min.js" defer></script>
  </head>
  <body>
    <div class="header-background">
      <div class="content">
        <h1>Header text</h1>
        <p>Supporting text</p>
        <a href="about.html" role="button">Learn more &raquo;</a>
      </div>
    </div>
	</body>
</html>
Hide result
+3

Source: https://habr.com/ru/post/1626635/

More articles:


All Articles