CSS Visibility Hidden Declaration Explained

Published: 08 May 2017
on channel: Full Stack Coding Tutorials

278

CSS Visibility Hidden Declaration Explained • CSS Visibility Hidden Declaration Explained

CSS visibility hidden allows you to add hidden content on the page. This is similar to the display:none; property, but there is one major difference. Visibility hidden hides the content, but keeps the area where the content was as a blank space. Display:none; hides the content and the content area.

You may want to stick to the display property because it gives you more options and there are few use cases where you would want to the space taken up by a element to remain taken up as it is when using visibility:hidden;

The other display values available to you are:

Block makes the element take up a whole row in the HTML element where it resides. Here's how it looks:

display:block;

Inline makes the element take up only the space it needs. Here's how it looks:

display:inline;

Inherit applies the same display property as its parent element. Here's how it looks:

display:inherit;

Display none makes elements disappear. It also makes it so the hidden element does not take up any space on the page. Here's how it looks:

display:none;

That's all there is to it. I hope this video helps you! If you have any questions, please leave them in the comments below. And before you go, subscribe and like :)

If you're into Wordpress, check out my WPLearningLab channel to learn more about WordPress so you can earn more for yourself, for your clients or for your business.

On this page of the site you can watch the video online CSS Visibility Hidden Declaration Explained with a duration of hours minute second in good quality, which was uploaded by the user Full Stack Coding Tutorials 08 May 2017, share the link with friends and acquaintances, this video has already been watched 278 times on youtube and it was liked by 2 viewers. Enjoy your viewing!