title: Is there a way to add padding to text in an element only when text is present?
body: <p>Using only HTML5 and CSS3 is there a way to add padding or at least what appears to be padding to text in an element only when text is present?</p>
  
  <p>Here's some example code and a demo to work with.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      background-color:red;
  }
  
  .text {
      text-align:center;  
      font-size:18px;
      padding:10px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;p class='text'&gt;text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The structure can change as long as when there is no text, container is <code>0px</code> high.</p>
  
  <p><a href="http://jsfiddle.net/D9Lxc/" rel="nofollow">DEMO</a></p>