How do I collapse an empty div?

I have a div that I want to use for dynamic content. When the content that fills the div is non-existent, I don't want to see it. Right now, I can see about a 5px box. Even when I remove the padding, I can still see about 1px of the box. How do I remove the box when there is no content?

#test {
border:1px dashed red;
font-size:16px;
margin:20px 0 0 0;
width:33开发者_如何学Python2px;
background-color:#eee;
padding:5px 0 5px 60px;
}

You can do in CSS:

 div#test:empty {
       display: none;
    }

There's a jquery way of doing this as well, if you're interested. The :empty selector can hide things like so:

$('#test:empty').hide();

If you remove the padding,margin and border (which you don't mention in your question) then the height will be 0px, and you will not see anything in the browser. Check the screenshot below and the offsetHeight value.

For example you can create another div below #test and then add display:none for #test, you will see that the position of the second div doesn't change.

Because there is a div . You have to do this with server-side programming language (or maybe javascript) . For example :

if(content()) // if there is any content
{
 echo "<div id=\"test\"></div>";
}
else
{
}

What about using the search box in the upper right corner?

Hide empty div will point you to some same questions, that have been answered before.