Overriding jquery mobile button margins

Question

I am spinning my wheels on what I am sure is a simple mistake.

Consider the following jqm (version 1.3) view (in haml)

#main-header{'data-role' => 'header'}

#main-content{'data-role' => 'content'}   #main-buttons
    %input#a{'type' => 'button', 'name' => 'a', 'value' => 'A'}
    %input#b{'type' => 'button', 'name' => 'b', 'value' => 'B'}

The stylesheet:

#main-buttons {
  margin: 30px;
  margin-top: 160px;
}   

#a {
  margin-bottom: 60px !important;
}

Here the style of margin-bottom I apply to button "a" has no impact. My goal is to add some vertical space between the two buttons. What am I missing?

The rendered UI looks as follows:

Answer 1

Here is my humble answer. The above answers explain more about your issue.

To override button style, add your style to .ui-btn.

I'm glad I have been of help :)