'Weird spacing between element and border in chrome

I wrapped a few divs inside a div container, and I can see some weird space between the borders and elements. The problem is occurring on chrome and edge. I tried Mozilla, and it worked fine.

I am using bootstrap, with some custom CSS.

I am sharing the relevant code as well :

.fullScreen {
  height: 100vh;
  width: 100vw;
}

.mainContainer {
  align-items: center;
  justify-content: flex-start;
}

.row {
  margin: 0!important;
}

#box {
  margin: 0 0 0 5vh;
  height: 90vh;
  width: 90vh;
}

.rowEndings {
  height: 36vh;
}

.rowMid {
  height: 18vh;
}

@media (orientation: portrait) {
  .mainContainer {
    align-items: flex-start;
    justify-content: center;
  }
}
<!-- adding bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<html lang="en" class="fullScreen">

<body class="fullScreen">
  <div class="mainContainer row fullScreen">
    <div id="box" class="border border-dark">

      <div class="row rowEndings border border-dark"></div>

      <div class="row rowMid border border-dark"></div>

      <div class="row rowEndings border border-dark"></div>

    </div>
  </div>
</body>

</html>

The alignment is looking perfect in the snippet, but I it's showing some space to me. I am attaching some snips for that :

enter image description here

enter image description here

There's no issue with padding and margin I believe. Any help is appreciated :)

UPDATE : The same is happening on edge as well. And the issue gets solved if I remove the margin of 5vh I have added to #box element.

htmlcsscross-browserspacingborder-spacing


Solution 1:[1]

Sometimes Chrome adding that weird spacing between the border and the content when the Zoom option is different than 100%. So just be sure that your Chrome Zoom option is set to 100%.

Window Ctrl and + or Ctrl and -

Mac ? and + or ? and -

Solution 2:[2]

Add to your css the !important rule.

* {
  margin: 0!important;
  padding: 0!important;
}

Solution 3:[3]

You should add a reset to your page, because browsers like Chrome have some default CSS style (user agent styles) like this one causing your troubles:

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

Try adding some code at the begining of your CSS file, or in a separate file, like this:

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

But it is a best practice is to add a well known and tested CSS reset file like Normalize.CSS https://necolas.github.io/normalize.css/ in order to be sure that the style you will write for your website will be based on the same basis, whatever the browser user agent default style.

Solution 4:[4]

Try with a CSS reset:

in your CSS:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Claudia Luque
Solution 3 Ben
Solution 4 Armando Guarino

Related Questions