Overriding jquery mobile button margins

css, html, jquery, jquery-mobile, jquery-mobile-button

Solution

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 :)

Problem

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:

Original source