From the course: CSS: Display

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Display: none vs. visibility: hidden

Display: none vs. visibility: hidden - CSS Tutorial

From the course: CSS: Display

Start my 1-month free trial

Display: none vs. visibility: hidden

- [Lecturer] Display none is one of CSS's favorite tricks and it's likely one you're already familiar with. I'll demo it for you anyway. But chances are you're probably familiar with it. But there's also another property called visibility, with a value of hidden. Sounds like the same thing. Doesn't it? Well, there are subtly different. So let's look at that difference now. So here inside of this CodePen, this is the same sort of section with the heading and the paragraph with some inline elements inside of it that you've seen before. I'm going to go ahead and write some CSS here to demonstrate this. So for example if I say strong, let's take all of the strong tags and let's display none. As you'll see here, all of the strong texts simply disappears. Notice that the space that it used to occupy has also disappeared. So if I set this back to inline, which is its default value, you'll see there are all that text comes…

Contents