1 pixel spacing between navbar flex container border and flex item border

kosta brillakis 0
Viewed 28

There is a weird 1 pixel border between the flex container border and the borders around my flex items. I've put in my own margin: 0 padding: 0 and box-sizing border box on *. I have also tried it with a full css reset with no change. I'm assuming it's a browser issue, but how do I fix it?

HTML

<body>
<nav class="grid-container">
    <div class="logo grid-item">
        <a href="#">logo</a>
    </div>
    <div class="about grid-item">
        <a href="#">about</a>
    </div>
    <div class="home grid-item">
        <a href="#">home</a>
    </div>
    <div class="contact grid-item">
        <a href="#">contact</a>
    </div>
    <div class="search grid-item">
        <a href="#">search</a>
    </div>
</nav>

</body>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
display: flex;
border: 2px solid red;
justify-content: end;
gap: 1rem;
margin: 0;
padding: 0;
}

div {
margin-top: 0;
margin: 0;
padding: 0;
display: block;
}

.logo {
margin-right: auto;
}

.grid-item {
border: 2px solid red;
}

a {
text-decoration: none;
}
css
1 Answers

I added some HTML and CSS to your code and ran it in jsFiddle.net in Chrome on Windows 10 and saw the problem you described. However, in Firefox there was no weird border with the border widths you gave (or with the ones I used). The code snippet I created below seems to work in Chrome and Firefox. This probably needs further investigation with more permutations of border widths for the grid-container and grid-item. In particular, you need to mention what browser, etc., did you test your code with.

Also, you should mention what was the browser zoom when you tested this. I checked this in Edge on Windows 10 at 100% zoom and it is clearly visible.

This may have something to do with odd and even values of border thickness and odd and even zoom percentages.

I think it is worth reading I need to remove a little space between my divided blocks to see if your question is connected.

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

.grid-container {
  display: flex;
  border: 2px solid red;
  justify-content: end;
  gap: 1rem;
  margin: 0;
  padding: 0;
  background: yellow;
}

div {
  margin-top: 0;
  margin: 0;
  padding: 0;
  display: block;
}

.logo {
  margin-right: auto;
}

.grid-item {
  border: 2px solid red;
  background: orange;
}

a {
  text-decoration: none;
}

.gc1 {
  border: 3px solid red;
}

.gc2 {
  border: 4px solid red;
}

.gc1>.grid-item {
  border: 3px solid green;
}

.gc2>.grid-item {
  border: 4px solid blue;
}
<nav class="grid-container">
  <div class="logo grid-item">
    <a href="#">logo</a>
  </div>
  <div class="about grid-item">
    <a href="#">about</a>
  </div>
  <div class="home grid-item">
    <a href="#">home</a>
  </div>
  <div class="contact grid-item">
    <a href="#">contact</a>
  </div>
  <div class="search grid-item">
    <a href="#">search</a>
  </div>
</nav>
<br />
<nav class="grid-container gc1">
  <div class="logo grid-item">
    <a href="#">logo</a>
  </div>
  <div class="about grid-item">
    <a href="#">about</a>
  </div>
  <div class="home grid-item">
    <a href="#">home</a>
  </div>
  <div class="contact grid-item">
    <a href="#">contact</a>
  </div>
  <div class="search grid-item">
    <a href="#">search</a>
  </div>
</nav>
<br />
<nav class="grid-container gc2">
  <div class="logo grid-item">
    <a href="#">logo</a>
  </div>
  <div class="about grid-item">
    <a href="#">about</a>
  </div>
  <div class="home grid-item">
    <a href="#">home</a>
  </div>
  <div class="contact grid-item">
    <a href="#">contact</a>
  </div>
  <div class="search grid-item">
    <a href="#">search</a>
  </div>
</nav>

Below is an image of the code snippet running in jsFiddle.net on Chrome (and the weird 1 pixel border is clearly visible):

jsFiddle.net showing weird 1 pixel border

PeterJames0
Related