Distance between the top side of the page and the first div

Question

I want to make a search bar on the left side of my website. I made a right-side-border around my navigation div. The problem that there is this small empty area where no line is. How can I make the distance to the top side of the page to 0px?

body,
html {
  margin: 0px;
}

html {
  height: 100%;
}

body {
  padding-left: 10px;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #36e7ff;
}

nav {
  width: 10%;
  padding-top: 0px;
  padding-bottom: 100%;
  border-right: 3px solid white;
  float: left;
  margin-right: 2%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="navigation.css">
  <title>Home</title>
</head>

<body contenteditable="false">
  <nav>

  </nav>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>´
</body>

</html>

I also tried: top: 0px, margin-top: 0px...

I want this:

Instead of this:

I have tried reading the description of your problem several times but cannot understand what you want to do. Perhaps a diagram would help. — Mike Poole, Aug 13 '19 at 16:10
there is a default margin applied to `p` collapsing with `body` — Temani Afif, Aug 13 '19 at 18:48

skyline3000 · Answer 1 · 2019-08-13T16:17:19.660

Paragraph <p> tags also have default margins on the top and bottom. Adding a CSS rule to turn that margin off will bring the content to the top.

Edit: I added padding to the <p> tag so just its inner content moves down as you depicted in the image.

body, html {
  margin: 0px;
}

html {
  height: 100%;
}

body {
  padding-left: 10px;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #36e7ff;
}

nav {
  width: 10%;
  padding-top: 0px;
  padding-bottom: 100%;
  border-right: 3px solid white;
  float: left;
  margin-right: 2%;
}

p {
  margin: 0;
  padding-top: 10px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="navigation.css">
    <title>Home</title>
</head>

<body contenteditable="false">
    <nav>

    </nav>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>´
</body>

</html>

You should open your browser's developer tools and inspect the elements on the page to see how their geometry is determined.

score 1 · Answer 2 · edited Aug 13 '19 at 16:43

I switched your code to display: flex instead of floats for the main Layout hope thats okay, your main problem was that you havn't reset the default spacing of the <p>. I wasn't sure if you maybe wanted to keep the spacing on top, thats why I didnt just remove it. If you have any questions just comment.

body,
html {
  margin: 0px;
}

html {
  height: 100%;
}

body {
  padding-left: 10px;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #36e7ff;
}

nav {
  width: 10%;
  padding-top: 0px;
  padding-bottom: 100%;
  border-right: 3px solid white;
  float: left;
  margin-right: 2%;
}

p {
  flex: 1;
}

.wrapper {
  display: flex;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="navigation.css">
  <title>Home</title>
</head>

<body contenteditable="false">
  <div class="wrapper">
    <nav>

    </nav>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>´
  </div>
</body>

</html>

Distance between the top side of the page and the first div

2 Answers2