How can I move my labels to the right with CSS?

I have a button that was dropped on my Webform at design-time, followed by a slew of Label/Checkbox pairs that are added dynamically at browse-time.

I've moved the button off the left edge of the page, and added some speacing between the dynamically-created controls, too, but the labels refuse to budge off the out-of-bounds marker, even though I've tried adding margin and padding values to move them right off the left edge of the page.

Here is my CSS:

<style>
    #Button1 {
        margin: 12px;
        padding: 12px;
    }

    label {
        margin: 24px;
        padding-left: 32px;
    }

    input[type='checkbox'] {
        margin-top: 8px;
    }
</style>

...and here is how it looks:

enter image description here

Why does neither margin nor padding-left budge the Labels? How can I get them to wake up and feel the boot in their gutter?

BTW, I create the Labels and Checkboxes like so in the code-behind:

For i As Integer = 0 To categoryDT.Rows.Count - 1
    ' for testing, limit count TODO - remove or comment out
    If i > 11 Then 'There are thousands...just grab enough to fit on the page without scrolling for now...
        Exit For
    End If
    Dim coName = New Label()
    ' Must prepend with something, as controls cannot share the same ID
    coName.ID = "lbl" + i.ToString()
    coName.Text = categoryDT.Rows(i)(0).ToString()
    formCustCatMaint.Controls.Add(coName)

    Dim chk = New CheckBox()
    chk.ID = "ckbx" + i.ToString()
    chk.Checked = True
    formCustCatMaint.Controls.Add(chk)

    ' Add a "line break" after each checkbox
    Dim l = New Label()
    l.Text = "<br>"
    formCustCatMaint.Controls.Add(l)
Next

UPDATE

At Linx's suggestion, I tried this where the Label/Checkbox pairs are created:

Dim divBegin = New Label
divBegin.Text="<div padding-left = 20px; >"
formCustCatMaint.Controls.Add(divBegin)

For i As Integer = 0 To categoryDT.Rows.Count - 1
   . . . ' code elided for brevity
Next

Dim divEnd = New Label
divEnd.Text="</div>"
formCustCatMaint.Controls.Add(divEnd)

...but it does naught.

UPDATE 2

It would really complicate my logic to do what Linx is suggesting in his second answer. I don't see why it's impossible to take care of this with css. The checkbox css is working; the button css is working; why is the label css not working? Even when I do this, and try to brute force the issue:

label {
    display: block !important;
    margin: 24px !important;
    padding-left: 32px !important;
}

...it still doesn't work - the labels stubbornly stick to the left side, like bulldog barnacles biting a British bobby bloke.

UPDATE 3

Bizarrely enough (too much!), even this (prepending 5 spaces to the label's text) doesn't work:

coName.Text = "     "+ categoryDT.Rows(i)(0).ToString()

?!?

Ears flared, trunk raised, and trumpet blaring!!!


ANSWERS:


I'm a bit late to the party but the correct solution is simple

A .NET Label (Not to be mistaken with HTML <label>) is a .NET Web Control.

A Label is sent back to the browser as a <span> therefore the browser doesn't recognize the css label selector.

To style Label use span selector instead:

span {
    margin-left: 24px;
    padding-left: 32px;
}

In this case the paddings/margins will work


BTW

You can add classes to Label in the code behind using CssClass property:

coName.ID = "lbl" + i.ToString()
coName.Text = categoryDT.Rows(i)(0).ToString()
coName.CssClass = "foo-class"
formCustCatMaint.Controls.Add(coName)

And then use the class in the css:

.foo-class {
    margin-left: 24px;
    padding-left: 32px;
}

Have you tried wrapping everything in a div and giving that some padding?


Instead of doing this dynamically, I think your easiest bet would be to do it simply in HTML and CSS like so:

<div class="wrapper">
    (html for labels)
</div

.wrapper {
    padding: 0 32px;
}

Suppose you have HTML which has two div one is parent div and another is child div like below

<div class="maindiv">
<div class="childlabeldiv">
     Align label to right
</div>
</div>

You can use below css to align label at right with other css that you need

.maindiv{
  width: 100%;
}
.childlabeldiv{
   text-align: right;
}

This rather simple approach - adding padding to the form - works:

#formCustCatMaint {
    padding: 4em;
}

It also adds padding to the button, but that's okay, too.

If somebody wants to add an answer based on this, I'll be glad to award the open 50-point bounty to them.



 MORE:


 ? Javafx I want to remove the dynamic element in Accordion
 ? Dynamic MVC Model Server side validation
 ? laravel 5.4 dynamic database connection
 ? How to initialize a char array as null within a default constructor?
 ? Java Play Framework creating logged in navigation bar - inserting dynamic html in scala template
 ? Dynamic search and filtering in Excel
 ? Dynamic TableView Swift 3 With Beginning Graph
 ? Switch case is not working in Reactjs
 ? Dynamic Polymorphism's weird output
 ? which technologies to use for forms created dynamically?