B4J Question Understanding cell margins and padding

'Class module
Sub Class_Globals
    Private ws As WebSocket 'ignore
    ' will hold our page information
    Public page As ABMPage
    ' page theme
    Private theme As ABMTheme
    ' to access the constants
    Private ABM As ABMaterial 'ignore   
    ' name of the page, must be the same as the class name (case sensitive!)
    Public Name As String = "TstMargin"  '<-------------------------------------------------------- IMPORTANT
    ' will hold the unique browsers window id
    Private ABMPageId As String = ""
    ' your own variables
    Private Top As Int = 0   
    Private Pad As Int = 0

End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
    ' build the local structure IMPORTANT!
    BuildPage       
End Sub

#Region ABM
Private Sub WebSocket_Connected (WebSocket1 As WebSocket)   
    Log("Connected")
        
    ws = WebSocket1       
    
    ABMPageId = ABM.GetPageID(page, Name,ws)
    
    Dim session As HttpSession = ABM.GetSession(ws, ABMShared.SessionMaxInactiveIntervalSeconds)
    If session.IsNew Then
        session.Invalidate
        ABMShared.NavigateToPage(ws, "", "./")
        Return
    End If
        
    If ABMShared.NeedsAuthorization Then
        If session.GetAttribute2("IsAuthorized", "") = "" Then
            ABMShared.NavigateToPage(ws, ABMPageId, "../")
            Return
        End If
    End If       
    ABM.UpdateFromCache(Me, ABMShared.CachedPages, ABMPageId, ws)       
    If page.ComesFromPageCache Then
        ' when we have a page that is cached it doesn't matter if it comes or not from a new connection we serve the cached version.
        Log("Comes from cache")       
        page.Refresh       
        page.FinishedLoading       
    Else
        If page.WebsocketReconnected Then
            Log("Websocket reconnected")
            ' when we have a client that doesn't have the page in cache and it's websocket reconnected and also it's session is new - basically when the client had internet problems and it's session (and also cache) expired before he reconnected so the user has content in the browser but we don't have any on the server. So we need to reload the page.
            ' when a client that doesn't have the page in cache and it's websocket reconnected but it's session is not new - when the client had internet problems and when he reconnected it's session was valid but he had no cache for this page we need to reload the page as the user browser has content, reconnected but we have no content in cache
            ABMShared.NavigateToPage (ws, ABMPageId, "./" & page.PageHTMLName)
        Else
            ' when the client did not reconnected it doesn't matter if the session was new or not because this is the websockets first connection so no dynamic content in the browser ... we are going to serve the dynamic content...
            Log("Websocket first connection")
            page.Prepare
            ConnectPage           
        End If
    End If
    Log(ABMPageId)       
End Sub

Private Sub WebSocket_Disconnected
    Log("Disconnected")
End Sub

Sub Page_ParseEvent(Params As Map)
    Dim eventName As String = Params.Get("eventname")
    Dim eventParams() As String = Regex.Split(",",Params.Get("eventparams"))
    
    #If DEBUG
'    Log($"Evt fired --->${eventName} Number params = ${Params.Size}"$)
'    For i = 0 To Params.Size-1
'        Log($"    Key = ${Params.GetKeyAt(i)}, value = ${Params.GetValueAt(i)}"$)
'    Next
    Log("-----------------------------------------------------")
    #End if
    If eventName = "beforeunload" Then
        Log("preparing for url refresh")
        ABM.RemoveMeFromCache(ABMShared.CachedPages, ABMPageId)
        Return
    End If
    Dim caller As Object = page.GetEventHandler(Me, eventName)
    If caller = Me Then
        If SubExists(Me, eventName) Then
            Params.Remove("eventname")
            Params.Remove("eventparams")
            If eventName = "page_dropped" Then
                page.ProcessDroppedEvent(Params)
            End If
            Select Case Params.Size
                Case 0
                    CallSub(Me, eventName)
                Case 1
                    CallSub2(Me, eventName, Params.Get(eventParams(0)))
                Case 2
                    If Params.get(eventParams(0)) = "abmistable" Then
                        Dim PassedTables As List = ABM.ProcessTablesFromTargetName(Params.get(eventParams(1)))
                        CallSub2(Me, eventName, PassedTables)
                    Else
                        CallSub3(Me, eventName, Params.Get(eventParams(0)), Params.Get(eventParams(1)))
                    End If
                Case Else
                    ' cannot be called directly, to many param
                    CallSub2(Me, eventName, Params)
            End Select
        End If
    Else
        CallSubDelayed2(caller, "ParseEvent", Params) 'ignore
    End If
End Sub

public Sub BuildTheme()
    ' start with the base theme defined in ABMShared
    theme.Initialize("pagetheme")
    theme.AddABMTheme(ABMShared.MyTheme)

    ' add your specific page themes
    
End Sub

public Sub BuildPage()
    ' initialize the theme
    BuildTheme
    
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    page.ShowLoader=True
    page.PageHTMLName = "index.html"
    page.PageTitle = "Template"
    page.PageDescription = "Template"
    page.PageKeywords = ""
    page.PageSiteMapPriority = ""
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY
        
    page.ShowConnectedIndicator = True
    page.ShowGridInfo = True
                
#Region NOT SAVED: 2021-07-08T09:30:25
    'PHONE
    '╔═══════════════════════════════════════════════════════════════════════════════════╗
    '║ 1,1                                                                               ║
    '╠═══════════════════════════════════════════════════════════════════════════════════╣
    '║ 2,1                                                                               ║
    '╠═══════════════════════════════════════════════════════════════════════════════════╣
    '║ 3,1                                                                               ║
    '╠═══════════════════════════════════════════════════════════════════════════════════╣
    '║ 4,1                                                                               ║
    '╚═══════════════════════════════════════════════════════════════════════════════════╝

    'TABLET
    '╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════╗
    '║ 1,1                                                                                                       ║
    '╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════╣
    '║ 2,1                                                                                                       ║
    '╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════╣
    '║ 3,1                                                                                                       ║
    '╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════╣
    '║ 4,1                                                                                                       ║
    '╚═══════════════════════════════════════════════════════════════════════════════════════════════════════════╝

    'DESKTOP
    '╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗
    '║ 1,1                                                                                                                               ║
    '╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╣
    '║ 2,1                                                                                                                               ║
    '╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╣
    '║ 3,1                                                                                                                               ║
    '╠═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╣
    '║ 4,1                                                                                                                               ║
    '╚═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝

    page.AddRows(5,True,"").AddCells12(1,"")
    page.BuildGrid ' IMPORTANT!
#End Region
End Sub

public Sub ConnectPage()
    
    Dim TstInp As ABMInput
    TstInp.Initialize(page,"TstInp",ABM.INPUT_TEXT,"Reference cell. Note cell(4,1) has .MarginLeft = 30px & .PaddingLeft = 30px",False,"mytheme")
    page.Cell(1,1).AddComponent(TstInp)
    
    Dim TstInp2 As ABMInput
    TstInp2.Initialize(page,"TstInp2",ABM.INPUT_TEXT,"Test cell",False,"mytheme")
    page.Cell(2,1).AddComponent(TstInp2)
    Log("TopPadding = "&page.Cell(2,1).PaddingTop)
    Log("BottomPadding = "&page.Cell(2,1).PaddingBottom)
    Dim up As ABMButton
    up.InitializeRaised(page,"Up","","","Cell.TopMargin increase","")
    page.Cell(3,1).AddComponent(up)
    
    Dim Dwn As ABMButton
    Dwn.InitializeRaised(page,"Dwn","","","Cell.TopMargin decrease","")
    page.Cell(3,1).AddComponent(Dwn)
    
    Dim Padup As ABMButton
    Padup.InitializeRaised(page,"Padup","","","Cell.TopPadding increase","")
    page.Cell(4,1).AddComponent(Padup)
    
    Dim PadDwn As ABMButton
    PadDwn.InitializeRaised(page,"PadDwn","","","Cell.TopPadding decrease","")
    page.Cell(4,1).AddComponent(PadDwn)
    ' Bottom cell has following set
    page.Cell(4,1).MarginLeft = "30px"
    page.Cell(4,1).PaddingLeft = "30px"
    
    Dim Edt As ABMEditor
    Edt.Initialize(page,"Edt",True,False,"")
    Dim Notes As String = $"<p>Notes :- </p><p>1] Padding does not change below 0</p>
    <p>2] There is a MarginLeft = 30px AND a PaddingLeft$ = 30px set on cell(4,1) </p>"$
    Edt.SetHTML(Notes)
    page.Cell(5,1).AddComponent(Edt)
    
    ' refresh the page
    page.Refresh
    
    ' Tell the browser we finished loading
    page.FinishedLoading
    ' restoring the navigation bar position
    page.RestoreNavigationBarPosition   
End Sub
#end region

Sub up_clicked(target As String)
    Dim inp As ABMInput = page.Component("TstInp2")
    Top = Top + 1
    page.Cell(2,1).MarginTop= Top&"px"
    page.Refresh
    inp.Text=$"Top margin = ${Top} Top padding = ${Pad}"$
    Log("Top = "&Top)
End Sub

Sub padup_clicked(target As String)
    Dim inp As ABMInput = page.Component("TstInp2")
    Pad = Pad + 1
    page.Cell(2,1).PaddingTop= Pad&"px"
    inp.Text=$"Top margin = ${Top} Top padding = ${Pad}"$
    page.Refresh
    Log("Pad = "&Pad)
End Sub

Sub dwn_clicked(target As String)
    Dim inp As ABMInput = page.Component("TstInp2")
    Top = Top - 1
    page.Cell(2,1).MarginTop= Top&"px"
    page.Refresh
    inp.Text=$"Top margin = ${Top} Top padding = ${Pad}"$
    Log("Top = "&Top)
End Sub

Sub paddwn_clicked(target As String)
    Dim inp As ABMInput = page.Component("TstInp2")
    Pad = Pad - 1
    page.Cell(2,1).PaddingTop= Pad&"px"
    inp.Text=$"Top margin = ${Top} Top padding = ${Pad}"$
    page.Refresh
    Log("Pad = "&Pad)
End Sub

#Region ABMPage
' clicked on the navigation bar
Sub Page_NavigationbarClicked(Action As String, Value As String)
    ' saving the navigation bar position
    page.SaveNavigationBarPosition
    If Action = "LogOff" Then
        ABMShared.LogOff(page)
        Return
    End If

    ABMShared.NavigateToPage(ws, ABMPageId, Value)
End Sub

Sub Page_DebugConsole(message As String)
    Log("---> " & message)
End Sub
#end region