How to remove this gap or merge the borders? Because the lengths are inconsistent

Question

How to remove this gap or merge the borders? Because the lengths are inconsistent box1 and box2 are 100px, box3 is 200px but their lengths are inconsistent because border... so how do their length are consistent?

    <main>
      <div class="shortBox">box1</div>
      <div class="shortBox">box2</div>
      <div class="longBox">box3</div>
    </main>

.shortBox {
  width: 100px;
  display: inline-block;
}
.longBox {
  width: 200px;
}
.shortBox,
.longBox {
  text-align: center;
  font-size: 20px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

Top scoring answer breaks it down perfectly and offers several methods to avoid this issue [Why is there an unexplainable gap between these inline-block div elements?](https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements) — AStombaugh, May 05 '22 at 13:48

score 1 · Accepted Answer · answered May 05 '22 at 14:26

This happens when you have elements that have display: inline or inline-block. Since the browser treats these elements the same way as text, a line-break will be treated as white-space.

Setting the font size to 0 for the wrapper basically eliminates the whitespace, but keep in mind, that this property will be inherited to child elements, so you may have to set the font-size back to >0 for children. Also, this may break layouts that use em as unit, so keep that in mind. By also adding box-sizing: border-box the gaps are gone.

main {
  font-size: 0;
}

.shortBox {
  width: 100px;
  display: inline-block;
}
.longBox {
  width: 200px;
}
.shortBox,
.longBox {
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

 <main>
  <div class="shortBox">box1</div>
  <div class="shortBox">box2</div>
  <div class="longBox">box3</div>
</main>

There is also a possible way to use comments to prevent the auto-formatting from adding the white-space / line-break. It does not look too elegant, but it gets the job done. Also, except for the box-sizing: border-box you don't need any additional CSS for this.

.shortBox {
  width: 100px;
  display: inline-block;
}
.longBox {
  width: 200px;
}
.shortBox,
.longBox {
  box-sizing: border-box;
  text-align: center;
  font-size: 20px;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

 <main>
  <div class="shortBox">box1</div><!--
  --><div class="shortBox">box2</div><!--
  --><div class="longBox">box3</div>
</main>

The third way of solving this issue is to utilize flexbox. You can create layouts like this, without having to worry about gaps because of white-spaces or line-breaks.

score 0 · Answer 2 · answered May 05 '22 at 13:46

0

watch this magic:

<main>
  <div class="shortBox">box1</div><div class="shortBox">box2</div>
  <div class="longBox">box3</div>
</main>

Notice that first 2 divs are NOT divided with new line.

Then in CSS add this extra 2px like this:

.longBox {
  width: 202px;
}

answered May 05 '22 at 13:46

Moebius

640
4
9

1

I'd suggest using "box-sizing: border-box" for the boxes instead of adding 2px to the long box – Matthias Seifert May 05 '22 at 13:47
1

but first 2 divs are wrap automatically in my vscode...and I thought there would be a way to not modify the length. I used to add *{ box-sizing: border-box;} but it still didn't solve my problem. – Junior May 05 '22 at 13:51
@Junior, that's correct, but these are some weird CSS stuff that can happen when you are using inline or inline-block display. – Moebius May 05 '22 at 13:57
1

@Matthias Seifert, this is correct, apply box-sizing: border-box; on .shortBox and .longBox – Moebius May 05 '22 at 13:58

How to remove this gap or merge the borders? Because the lengths are inconsistent

2 Answers2