-1

I am building very simple interface, something like Slack. But while doing so, the left navigation makes some padding from the body, however I made padding equals zero and margin. 

.app {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.leftNav {
  border: 1px solid black;
  height: 100vh;
  padding: 20px;
  margin: 0;
}
.main {
  padding: 10px;
}
<div class="app">
      <div class="leftNav">left navigation</div>
      <div class="main">main content</div>
    </div>
Joseph Sible-Reinstate Monica
  • 45,431
  • 5
  • 48
  • 98
tarek hassan
  • 772
  • 11
  • 35

2 Answers2

1

The first rule is all you need. It will reset everything to have 0 margin and padding. Therefore, you could easily change them yourself without any problem

* {
  padding: 0;
  margin: 0;
}

.app {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}
.leftNav {
  border: 1px solid black;
  height: 100vh;
  padding: 20px;
  margin: 0;
}
.main {
  padding: 10px;
}
<div class="app">
      <div class="leftNav">left navigation</div>
      <div class="main">main content</div>
</div>

Here's a working example :)

C.RaysOfTheSun
  • 706
  • 1
  • 6
  • 9
1

I don't know what you expected but i see these css as default. I mean the space is not app's padding or margin, it's the margin between <body> and <html> tag.

body { display: block; margin: 8px; }

Tony
  • 66
  • 6