It isn't about margins and I don't love fixing a look of things with margins.

X-Ref (I'm working on fix for your issue): #11407

Uhm, that's okay with me but why can't we use margins to solve this?
The thing is, the two buttons have two borders, which touch each other and makes it look like one fat border...

Using margin-right:-1px; ensures the two borders overlap, making it look like one shared border between two buttons...

Your problem is fixed in #11435.

Fixed by #11435.

This pull request #11435 you accepted is hacking.
It conceals the problem, but does not address the cause.

It dose two things.

.input-group-btn > .btn:not(:first-of-type):not(:last-of-type) {
  border-radius: 0;
}

That has nothing to do with this problem. But it make the css more complex.

.input-group-btn > .btn + .btn:last-of-type {
  margin-left: -5px;
}

Makes the css also more complex and is hacking. It works fine for font-size 14px, but not more. You want know the reason? Read the comment in my pull request #11817.

If you do not believe me, here is a example: http://jsbin.com/UNopeHOY/3/edit?html,css,output with
font-size: 17px

Agree

@tlindig About what hacking are you talking about? :O

I think it's already been solved at #11817

@zdroid

About what hacking are you talking about? :O

With hacking I mean a programming technique "try and error". The goal is to suppress the symptoms.

IMHO that kind of solution should be the last choice.

The first choice should be the elimination of the cause, if it is possible.

In this special case we have this situation:
The cause is the space character between the button elements in the button group.
The best way would be, to write no space. ( second form here: http://jsbin.com/UNopeHOY/5/edit?html,output )
The second way is, to reduce the size of that character to zero. -> #11817
But try, to move the button element exactly over this space, this is a very fragile solution. It will fail in the next situation. ( Issues #11883, Issue #11882)
So I called it hacking.