title: jQuery Mobile: Spacing the widgets in a page
body: <p>I am using a grouped-buttons-widget and a listview-widget. My code is </p>
  
  <pre><code>&lt;div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal"&gt;
      &lt;div class="ui-controlgroup-controls" align="center"&gt;
          &lt;!-- ........ --&gt;        
      &lt;/div&gt;        
  &lt;/div&gt;
  
  &lt;ul data-role="listview" id="mylist"&gt;
      &lt;li data-role="list-divider" role="heading" data-theme="b"&gt;
          Sheet: Untitled1
      &lt;/li&gt;
      &lt;!-- ........ --&gt;
      &lt;li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b"&gt;
          Total:
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The problem is now the widgets appear just next to each other without any spacing in between. </p>
  
  <p><img src="https://i.stack.imgur.com/GnYoh.jpg" alt="enter image description here"></p>
  
  <p>What should I do to ensure desired space between these (and perhaps other) widgets?</p>