How to Hide an Object with CSS

by Zicheng Ren

HTML elements can be hidden in CSS using either of two options depending on the effect you desire. If you want an element to be invisible but still take up space on your Web page, use the CSS property "visibility." On the other hand, if you want the element to be not only invisible, but also to take up no space on your Web page, use the CSS property "display."

How to Hide an Element

The CSS visibility property applies to all HTML elements and can be used to have the element take up space but not be displayed by setting the value to "hidden." For example, p { visibility: hidden; } will leave a blank space on your Web site where every <p> is. The CSS display property also applies to all HTML elements and can be used to completely hide elements by setting the value to "none." Speaking browsers will also ignore these elements when reading a Web page to a user. For example, p { display: none; } will hide every <p> and leave no empty space on your Web site.

About the Author

Digital signal processing, Arduino and programming languages are just a few of the research interests Zicheng Ren pursued as he earned his M.E. in electronic engineering. He has been published on a variety of tech-related topics. Ren is a graduate student at Oregon Health and Science University.

Photo Credits

  • photo_camera Peshkova/iStock/Getty Images