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    lt div id  divCheckbox  style  visibility  hidden  gt    I don t see the checkbox  but it still creates a new line   If I have this    lt div id  divCheckbox  style  visibility  hidden  display inline   gt    it no longer creates a new line  but it takes up horizontal space on the screen   Is there a way to have a hidden div that takes up no room  vertical or horizontal

User · Accepted Answer

Use display none    lt div id  divCheckbox  style  display  none   gt     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

User · Answer

To hide the element visually  but keep it in the html  you can use    lt div style  visibility hidden  overflow hidden  height 0  width 0   gt     content   lt  div gt    or   lt div style  visibility hidden  overflow hidden  position absolute   gt     content   lt  div gt    What may go wrong with display none  It removes the element completely from the html  so some functionalities may be broken if they need to access something in the hidden element

User · Answer

Since you should focus on usability and generalities in CSS  rather than use an id to point to a specific layout element  which results in huge or multiple css files  you should probably instead use a true class in your linked  css file    hidden   visibility  hidden  display  none      or for the minimalist    hidden   display  none      Now you can simply apply it via    lt div class  hidden  gt  content  lt  div gt

User · Answer

Since the release of HTML5 one can now simply do    lt div hidden gt This div is hidden lt  div gt    Note  This is not supported by some old browsers  most notably IE  lt  11    Hidden Attribute Documentation   MDN W3C

User · Answer

x000D   x000D  display  none  x000D   x000D   x000D    This should make the element disappear and not take up any space

User · Answer

Show   hide by mouse click    lt script language  javascript  gt       function toggle              var ele   document getElementById  toggleText            var text   document getElementById  displayText             if  ele style display     block                  ele style display    none               text innerHTML    show                     else                ele style display    block               text innerHTML    hide                    lt  script gt    lt a id  displayText  href  javascript toggle     gt show lt  a gt   lt    click Here   lt div id  toggleText  style  display  none  gt  lt h1 gt peek-a-boo lt  h1 gt  lt  div gt    Source  Here

User · Answer

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

User · Answer

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

User · Answer

Consider using  lt span gt  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  lt div gt  not to display itself--if in fact the checkbox itself cannot be styled in the way you want

User · Answer

To prevent the checkbox from taking up any space without removing it from the DOM  use hidden    lt div hidden id  divCheckbox  gt    To prevent the checkbox from taking up any space and also removing it from the DOM  use display  none    lt div id  divCheckbox  style  display none  gt

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

Examples related to html

Examples related to hidden