What needs to be fixed

Protostar (Joomla! version 3.x).

Buttons (<label> class .btn) within button groups are separated from each other with a 1 pixel gap occupied by their respective side frames when the HTML block includes other (<input>) lines in between.

This is an example of a button group when editing a module in the Protostar frontend:

This is the underlying HTML code:

<fieldset id="jform_published" class="btn-group radio">
	<input type="radio" id="jform_published0" name="jform[published]" value="1" checked="checked">
	<label for="jform_published0" class="btn active btn-success">Published</label>
	<input type="radio" id="jform_published1" name="jform[published]" value="0">
	<label for="jform_published1" class="btn">Unpublished</label>
	<input type="radio" id="jform_published2" name="jform[published]" value="-2">
	<label for="jform_published2" class="btn">Trashed</label>
</fieldset>

Why this should be fixed

Although editing is not broken in any way, it is neither intended nor transparent why alignment of buttons behaves differently.

This is an example of a button group that displays correctly:

How would you fix it

It seems that the CSS rule to close the gap does not apply in this scenario. I am no expert in CSS/LESS, but I believe that

.btn-group > .btn + .btn {
	margin-left: -1px;
}

should be replaced either with

.btn-group > .btn + input + .btn {
	margin-left: -1px;
}

or with

.btn-group > .btn ~ .btn {
	margin-left: -1px;
}

(different selector to address all .btn class elements on the same level).

Side Effects expected

None.

Personal remark

There may be other CSS/LESS rules with + selector affected when confrontated with additional HTML code lines between the elements. Besides, I do not know which (template) files other than template.css must be edited as well.