Weird spacing between element and border in chrome

M

5

6

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 :

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.

Marishamariska answered 1/12, 2020 at 8:57 Comment(4)

Theres no space inbetween for me. What browser are you using? – Watercourse 1/12, 2020 at 9:0

@Watercourse I'd appreciate if you read the question again :) The problem is occurring on chrome. It works fine on Firefox. – Marishamariska 1/12, 2020 at 9:7

I was asking because i'm on the latest version of chrome and the problem doesn't exist for me. Maybe try updating your chrome? – Watercourse 1/12, 2020 at 9:34

Ok I created a local html file but I don't reproduce. Can you give us a reproductible example ? Is only adding "box-sizing: border-box;" applied to all your elements solve your issue ? Is your browser zoom on your page is set to 100% ? Using outline rather than border does solve your issue ? Also I think you should use height:100% rather than 100vh for you fullscreen class if possible, for mobile scroll compatibility. Thanks :) – Sharpfreeze 1/12, 2020 at 9:41

S

3

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.

You can't make your box-sizing include the shadows. So shadow overlaps content.
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.

Subclavian answered 2/2, 2022 at 19:14 Comment(2)

Hey Metehan! Thanks for the help. The default styling provided by Bootstrap had "box-sizing" property set to "border-box". I posted the question long ago, but never found a good answer. I resolved the issue by thickening the borders. And it worked fine after that. Your answer is best of all I have read. So upvoting yours. Welcome to StackOverflow. – Marishamariska 4/2, 2022 at 8:34

My borders were already about 15px thick so it wasn't a solution for me. Thanks a lot for upvote. – Subclavian 8/2, 2022 at 22:2

T

3

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 -

Thessalonians answered 25/2, 2021 at 8:54 Comment(0)

S

3

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.

You can't make your box-sizing include the shadows. So shadow overlaps content.
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.

Subclavian answered 2/2, 2022 at 19:14 Comment(2)

Hey Metehan! Thanks for the help. The default styling provided by Bootstrap had "box-sizing" property set to "border-box". I posted the question long ago, but never found a good answer. I resolved the issue by thickening the borders. And it worked fine after that. Your answer is best of all I have read. So upvoting yours. Welcome to StackOverflow. – Marishamariska 4/2, 2022 at 8:34

My borders were already about 15px thick so it wasn't a solution for me. Thanks a lot for upvote. – Subclavian 8/2, 2022 at 22:2

O

0

Add to your css the !important rule.

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

Orlan answered 1/12, 2020 at 9:5 Comment(1)

That is not solving problem as well. I have updated the question. Please check :) – Marishamariska 1/12, 2020 at 9:27

S

0

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.

Sharpfreeze answered 1/12, 2020 at 9:7 Comment(1)

Ok I created a local html file but I don't reproduce. Can you give us a reproductible example ? Is only adding "box-sizing: border-box;" applied to all your elements solve your issue ? Is your browser zoom on your page is set to 100% ? Using outline rather than border does solve your issue ? Also I think you should use height:100% rather than 100vh for you fullscreen class if possible, for mobile scroll compatibility. Thanks :) – Sharpfreeze 1/12, 2020 at 9:46

L

-1

Try with a CSS reset:

in your CSS:

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

Lard answered 1/12, 2020 at 9:1 Comment(1)

No! I have tried that already. That is not working. Thanks btw :) – Marishamariska 1/12, 2020 at 9:6

Recommended topics

Hot tags