How to Create a Hidden Div without a Line Break or Horizontal Space

Have you ever needed to create a hidden <div>, which does not add a line break or horizontal space? If so, read this snippet.

You may mistakenly think that using the CSS visibility property and setting its “hidden” value can solve this problem. However, this will hide the element but will still take up space. Instead of it, use the display property set to “none”, which will hide the element from the document without adding a line break or space.

This can be easily done with a few easy steps. Let’s start with creating HTML.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use <h1> and <p> elements.
  • Add a <div> element with the id attribute named “hide”.
<h1>Example</h1>
<p>In the example below the div tag is hidden.</p>
<div id="hide">This is the hidden div.</div>

Add CSS

  • Set the display property to “none” for the “hide”.
#hide {
  display: none;
}

Now, see the full example.

Example of creating a hidden <div> element without a line break and space:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Example</h1>
    <p>In the example below the div tag is hidden.</p>
    <div id="hide">This is the hidden div.</div>
  </body>
</html>