noobie Q about style setting for collapsible element

noobie Q about style setting for collapsible element

hello i'm using a little piece of code that i pasted from the web. i guess it's kind of old but if i can make it work then it don't matter i just wanna add one parameter, the "padding: 10px;" and change the h2 element a bit. anyone know why the padding is being ignored by the browser?
thanx, mike

  1. <!DOCTYPE html><html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
    h2 { padding: 10px; }   <!------------- padding parameter is not working --->
    </style>
    </head>
    <body>
    <div data-role="page" id="pageone">
      <div data-role="main" class="ui-content">
        <div data-role="collapsible" data-collapsed-icon="false"><h2><font size="2">text</h2>
          <div data-role="collapsible" data-collapsed-icon="false"><h3><font size="2">more text</h3></div></div>
      </div></div></body></html>