Unexpected style margin collisions

[nickfujita]

Sample file:

[Script Info]
ScriptType: v4.00+
Collisions: Normal
WrapStyle: 0
PlayResX: 640
PlayResY: 360

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, Strikeout, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: one,Ariel,18,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,-1,0,0,0,100,100,0,0,1,0,0,2,0278,0226,0130,1
Style: two,Ariel,24,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,-1,0,0,0,100,100,0,0,1,0,0,2,0010,0010,0018,1

[Events]
Format: Layer,Start,End,Style,Name,MarginL,MarginR,MarginV,Effect,Text
Dialogue: 0,0:00:00.00,0:10:26.01,one,Sign,0000,0000,0000,,Hello
Dialogue: 0,0:00:00.00,0:10:22.42,two,Rei,0000,0000,0000,,Good Bye

Expected result (as rendered in Aegisub)

Actual result

When inspecting the rendered HTML/CSS it looks the style values for margins are being rendered to position the text, but they are affecting one another when rendered at the same time. The problem with this, is that when the same is rendered in Aegisub, the style values for margins do not impact one another.

Is there possibly a configuration option that needs to be set on my end to render the 2 dialogs without having their margins affecting each other?

[Arnavion]

Duplicate of #48