CODEWITHSUNDEEP
htmlcss
kai
kai

Reputation: 68

Border bottom is detached from each other

I have been facing an issue with some HTML code. The thing is that I want to simulate tabs. The selected tab has a border bottom and the tabs' container also has a border bottom. But in my default code they looked separated.

I've tried to see if there was the spaces that surrounds the tabs' div but nothing.

<html>
<body>
<div class="another">
  another block
</div>
<div class="container">
<div class="box">
First
</div>
<div class="box selected">
Second
</div>
</div>
</body>
</html>

.container {
  border-bottom: 1px solid gray;
  display: flex;
  font-size: 14px;

  .box {
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    &.selected {
      border-bottom: 1px solid red;
    }
  }
}

.another {
  display: flex;
  padding: 0.5rem 0;
}

Here is the example of the issue: https://jsfiddle.net/10zqwguh/1/ (notice the red border is detached from the gray line of its container)

If you modify the line 18 and instead of 0.5rem write 0.55rem (which modify the padding of a box on top of the container... it has nothing to do with the container!) it fixes the issue.

What would be the reason for this?

** EDIT ** I want the double border. What I don't want is the tiny space between them like I show here

Upvotes: 1

Views: 276

Answers (4)

kai
kai

Reputation: 68

I finally got it. And please allow me to answer my own question:

The key thing is that I was using different units, such as px and rem and the browser wasn't doing a great job doing divisions.

I have stated that htmland body have 14px and the padding/margin for the boxes was 0.5rem (which normally would result a 7px, but it was giving 6.)

So what I did was to use 7px as margin or padding and voilà.

Cheers

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272648

An inset box-shadow seems to work better in your case:

.container {
  border-bottom: 1px solid gray;
  display: flex;
  font-size: 14px;
}

.box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
}

.selected {
  box-shadow: 0 -1px 0 inset red;
}

.another {
  display: flex;
  padding: 0.55rem 0;
}
<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

Or use the border on the elements without touching the container:

.container {
  display: flex;
  font-size: 14px;
}

.box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  border-bottom:1px solid grey;
}

.selected {
  box-shadow:0 -1px 0 inset red;
}

.another {
  display: flex;
  padding: 0.55rem 0;
}
<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

As asobak already explained, you are applying a border on the parent as well on the child, which gives a double border.

Here is an alternative solution, putting the border-bottom on the .box elements instead of the .container

.container {
  display: flex;
  font-size: 14px;
}

.container .box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  border-bottom: 1px solid gray;
}

.container .box.selected {
  border-bottom: 1px solid red;
  /* or: border-bottom-color: red; */
}

.another {
  display: flex;
  padding: 0.5rem 0;
}
<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

Upvotes: 2

asobak
asobak

Reputation: 329

The reason for that is because you implementing .selected inside a .box, and therefore border from .selected is 1px above the border of .box. Using margin-bottom: -1px; will set the border from .selected exactly above border of .box.

You can check it here.

    .container {
      border-bottom: 1px solid gray;
      display: flex;
      font-size: 14px;

      .box {
        text-align: center;
        flex-grow: 1;
        flex-basis: 0;
        &.selected {
          margin-bottom: -1px;
          border-bottom: 1px solid red;
        }
      }
    }

    .another {
      display: flex;
      padding: 0.5rem 0;
    }

    <html>

      <body>
        <div class="another">
          another block
        </div>
        <div class="container">
          <div class="box">
            First
          </div>
          <div class="box selected">
            Second
          </div>
        </div>
      </body>

     </html>

Upvotes: 2

Related Questions