How do you create a hidden div that doesn't create a line break or horizontal space.

Question

i want to have a hidden checkbox that doesn't take up any space on the screen

if i have this:

<div id=\"divCheckbox\" style=\"visibility: hidden">"

i dont see the checkbox but it still creates a new line

if i have this:

<div id=\"divCheckbox\" style=\"visibility: hidden;display:inline;\">"

it no longer creates a new line but it takes up horizontal space on the screen.

is there anyway to have a hidden div that takes up no room (vertical or horizontal?

Answer 1

Use style="display: none;". Also, you probably don't need to have the DIV, just setting the style to display: none on the checkbox would probably be sufficient.

Answer 2

Use display:none;

<div id="divCheckbox" style="display: none;">

• visibility: hidden hides the element, but it still takes up space in the layout.

• display: none removes the element completely from the document, it doesn't take up any space.

Answer 3

Consider using <span> to isolate small segments of markup to be styled without breaking up layout. This would seem to be more idiomatic than trying to force a <div> not to display itself--if in fact the checkbox itself cannot be styled in the way you want.

Answer 4

In addition to CMS´ answer you may want to consider putting the style in an external stylesheet and assign the style to the id, like this:

#divCheckbox {
display: none;
}