While tinkering with Lightning base components, I realized that a linebreak - which may seem to have no effect at all - can actually have a visual impact. I don't have a strong HTML background so I'm asking here.
I was trying to a invoke lightning:tab component, with icon. This is the code and resulting visual:
<lightning:tab>
<aura:set attribute="label">
<lightning:icon iconName="utility:open" size="x-small" />Open
</aura:set>
Content1
</lightning:tab>
Then I add a linebreak after lightning:icon as below:
<lightning:tab>
<aura:set attribute="label">
<lightning:icon iconName="utility:open" size="x-small" />
Open
</aura:set>
Content1
</lightning:tab>
And now there's a space between icon and label, which now looks fine:
If I hadn't realized that, I was going to add slds-margin class attribute to each lightning:icon component, which is extra code.
Is this an expected behavior? If so, please redirect me to an online source where I can learn such HTML "secret spots".