For some reason that I cannot grasp, if I click in a line, I will see the Font size (Type will show "p"). If I click another line, even the font size disappears (type will show "Span").
Question 1: WHY do you have that Update Type button?
Question 2: What was it meant to do?
Question 3: Why does it create those gaps?
Now, I will have to redo that Topic.
Next discussion about the gaps.
For point 1, see my response in this thread:
As far as I can tell, the Update Style icon takes the inline formatting applied to the HTML element the cursor is currently inside, and updates the applicable style in the stylesheet. In this case, I think your cursor was inside span element when you applied left and right margins as inline formatting (this is discussed in the thread above). Then when you clicked Update Style the "span" style in your stylesheet was updated to use the inline margins. So every time a span element appears in the code, you can now see it because it has margins applied.
So what you need to do is open your stylesheet, expand the Character Styles section, click "span" and remove the margins.
You probably want to remove any formatting defined for this span entry, so that they are invisible unless you apply a specific class (e.g. inline-superscript in the above example.)
To explain the syntax above, 'span' by itself says "apply this formatting to the span element every time you see it". 'span.sometext' means "apply this formatting to the span element IF it has the special name sometext". The special name is called a class in the css standard. The same format applies to every element. For example:
div.NoteBox: apply formatting to a div with the class NoteBox
span.FieldName: apply formatting to a span with the class FieldName
li.BlueText: apply formatting to a list item with the class BlueText.
The class name can only contain letters, numbers and dashes. (no spaces)