Search code examples
htmlcsscross-browserspacingborder-spacing

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.

Solution

  • I had that problem too. A few pixels of the gap between content and borders. Also not regular, different spaces in each. I have seen this on Edge and Chrome. They both are WebKit based. I haven't seen it in Firefox. It seems like the problem is in WebKit itself.

    My solution to that problem was to not use borders. Instead, I used

    filter: dropshadow(0px 0px 0px 2px black);
box-shadow: 0px 0px 0px 2px black;

    These don't have that gap problem but if you are setting your

    box-sizing: border-box;

    You have an issue of not including border size within your width and height. For that problem, you can put your box shadow inside:

    filter: dropshadow( inset 0px 0px 0px 2px black);

    But this time, we face two more problems.

    1. You can't make your box-sizing include the shadows. So shadow overlaps content.
    2. Shadows are under the element you set. So you cannot see them.

    To solve this you either can give your element a ::before and give the shadow to that pseudo element

    OR

    You can put your element in a container div and give the shadow to the container. This way, you can also give padding in the size of borders (shadows) to the container to get make its size include its fake borders and not overlap them. Also, you need to center your element inside that container.