How to Create a Hidden Div That Doesn't Create a Line Break or Horizontal Space

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

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.

Hidden divs make my site too long

style="display: none" in the css

Put buttons under each other that don't leave space when hidden

I have found how to make it work.
Instead of using

document.getElementById("button").style.visibility = 'hidden'

I have now used

document.getElementById("button").style.display = 'none'

This makes the buttons fill the gaps when they're hidden.

How do I prevent DIV tag starting a new line?

The div tag is a block element, causing that behavior.

You should use a span element instead, which is inline.

If you really want to use div, add style="display: inline". (You can also put that in a CSS rule)

Hide some divs (it won't take space)

You need to use display:none to hide an element completely from the layout instead, which is documented as:

none - This value causes an element to not appear in the document. It has no effect on layout.

visibility:hidden will leave an invisible box, which is the problem you are encountering. From the documentation:

hidden - The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

The default CSS display value for a <div> is display:block, so to show the <div> again, just set the element back to display:block. Note that there are other values for display, so take care to set it back to it's original value (which might not necessarily be the default value).