0

I have a submit button:

<input class="my-class" type="submit" value="Submit">

when I put in my css:

.my-class{
    margin-left:auto;
}

it stays on the left side, I don't know why, because everything else works like:

    margin-left:1rem;
    margin-left:300px;
    margin-left:30%;

I'm completely confused!

halfer
  • 19,824
  • 17
  • 99
  • 186
Sven
  • 1,014
  • 1
  • 11
  • 27
  • 1
    auto will resolve to 0 for inline level element – Temani Afif Jun 10 '20 at 14:05
  • 2
    Add `display:block;` to the input class and `margin-left` will work. https://jsfiddle.net/r45h98ta/ – MattHamer5 Jun 10 '20 at 14:06
  • 1
    Thank you so much @MattHamer5 – Sven Jun 10 '20 at 14:10
  • 1
    As your input element is an inline element, it will take margin auto as zero because inline elements reserves space after them to accommodate other inline elements, but if you make it a block element then it will honor the margin auto property, because the block elements reserve the horizontal space (thus making it 'available') for them only. – Gagandeep Singh Jun 10 '20 at 14:12

1 Answers1

0

The property margin-left:auto to be considered, you could add a display:block to your button like so 

.my-class{
  display:block
  margin-left:auto;
}
jrmy_o
  • 148
  • 9