Empty div (with style: height) will not display

Question

Incredibly simple piece of HTML - but not displaying how I would expect.

I\'m trying to create an empty div that displays as whitespace on the top of the p

Answer 1

The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.

Answer 2

The reason it did not display is because you had position:absolute in your style. That means that div will be positioned independently of the other elements, and have no effect on the div that follows. So your second div is essentially the first div on the screen.

Answer 3

Add some whitespace to your div and it will work.

<div style="height:400px; width:100%">&nbsp;</div>

Answer 4

So I threw your code into my editor and added a black background like below...

<div style="height:400px; 
            width:100%; 
            margin:0; 
            padding:0; 
            position:absolute;           
            background-color: #000;">
</div>

and it showed up fine for me. I am not sure what you were expecting to see, but you can get some seemingly weird results with 'position: absolute'.

• Absolute means that the element is positioned relative to its first positioned ancestor element.
• For general use 'position: relative', more often than not, will return desired results. Relative basically means that the element is positioned relative to its normal position, so you can move it via left:20px or right: 20px; It's likley to go where you want it to better. The other thing to consider is the div elements display property. I noticed you did not set it, and you are having trouble with the way the div is displaying. Usually a div element is set to 'display: block;', though not always. I always make sure to define the display property with div elements because I have found that if you don't an object will simply not display at all when you attempt to render it in the browser, or it could display in an undesirable way.

Answer 5

If you just want to add white space try this

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

or you could just add padding to the body like body { padding-top: 400px; }

Answer 6

For who looking for a white space (not exactly an empty div) you can add an empty span so the div is no more considered as empty one.

Avoid using   because the default font-size can make the div higher than you want.

div{
    height:200px;
    background:#ff8800;
}

<div><span></span></div>