In addition to the response given, this issue arises due to the configuration of preserveWhitespaces.
The root cause lies in the fact that your template code removes all whitespace, such as:
<div>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-cancel">Cancel</button>
</div>
When the whitespace is eliminated, the line breaks at the end of each button element are also removed. It is these line breaks that create the extra space, not margins between the buttons.
This explains why the buttons appear stuck together.
<div><button class="btn btn-success">Success</button><button class="btn btn-info">Info</button><button class="btn btn-cancel">Cancel</button></div>
You can implement a global solution or address the issue for specific components if necessary. Refer to https://angular.io/api/core/Component where it is explained that @components documentation offers the option to enable or disable this feature for individual components.
Alternatively, as suggested in the comments, you could add margin globally to all .btn classes. However, be cautious as this may lead to excessive margin between buttons if the setting changes again.
It is important to note that this is an HTML/DOM phenomenon, unrelated to Angular or CSS. The same effect can be observed with any inline elements by adjusting the line breaks/spaces between each element.