 <p>If you want the element to not be visible AND not take in any space you should do:</p> <pre><code>.hidden { display: none; } </code></pre> <p>However if you want to hide the element, but let it take in space you should do:</p> <pre><code>.hidden { visibility: hidden; } </code></pre> <p>See this <a href="http://jsfiddle.net/PeeHaa/gydZV/" rel="nofollow">simple demo</a> for an example.</p> <p>The fact that you think the style is overwritten by the user-agent is that the user-agent doesn't recognize the style you are trying to use (because it is invalid).</p>