title: jQuery UI slider CSS
body: <p>Hello there guys I'm looking for the answer to the styling of the jQueryUI slider.
  I would like to know how to get padding at the top of a div so the slider sits down more on a page I have tried using <code>padding-top: 10px;</code> on all the slider classes as I couldn't find any solution. Maybe I've been steering to long :) Here is the code I am playing around with </p>
  
  <pre><code>/*!
   * jQuery UI Slider 1.8.21
   *
   * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
   * Dual licensed under the MIT or GPL Version 2 licenses.
   * http://jquery.org/license
   *
   * http://docs.jquery.com/UI/Slider#theming
   */
  .ui-slider { position: relative; text-align: left; }
  .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
  .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
  
  .ui-slider-horizontal { height: .8em; }
  .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
  .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
  .ui-slider-horizontal .ui-slider-range-min { left: 0; }
  .ui-slider-horizontal .ui-slider-range-max { right: 0; }
  
  .ui-slider-vertical { width: .8em; height: 100px; }
  .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
  .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
  .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
  .ui-slider-vertical .ui-slider-range-max { top: 0; }
  </code></pre>