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;
}

Answer 1

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.

Answer 2

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;
}