Weird spacing between element and border in chrome

user_14046126 0
Viewed 1393

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.

border-spacing spacing cross-browser css html
5 Answers

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 -

user_76476810

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.

user_177105230

Add to your css the !important rule.

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

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.

user_54928990

Try with a CSS reset:

in your CSS:

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