0

My black border triangle is centered. But there is an extra bottom margin and (hence the scroll bar appears). Why?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  background: blue;
}

.canvas {
  border: 10px solid black;
  height: 90vh;
  width: 90%;
  margin: 5vh 5%;
}
<body>
  <div class="canvas">
    Dummy text
  </div>

</body>

a screenshot of the black border triangle

Sfili_81
  • 2,377
  • 8
  • 27
  • 36
David sew
  • 23
  • 3

1 Answers1

0

It happens because of the margin: 5vh 5%;. To center a div I would suggest to use flex:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  background: blue;

  /* Center div */
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  border: 10px solid black;
  height: 90vh;
  width: 90%;
}
<body>
  <div class="canvas">
    Dummy text
  </div>
</body>
Samball
  • 623
  • 7
  • 22
  • Just curious. So before css flex came around, there was no way to avoid that bottom margin and scroll bar? – David sew May 05 '22 at 12:13
  • There [are a couple more ways](https://stackoverflow.com/a/19461564/14246637) to do it but I prefer flexbox – Samball May 05 '22 at 12:18