I’m confused with these two terms which are used in CSS. What is the difference between visibility and display in CSS?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’m confused with these two terms which are used in CSS. What is the difference between visibility and display in CSS?
In layman’s terms,
visibilitydetermines if the element is rendered on screen but does not affect how layout is performed (i.e. how the browser calculates where each element goes on the screen and how much space it takes up).On the other hand,
displayspecifically controls how the element is laid out on the page; this affects its visible status “as a side effect” becausedisplay: nonemeans “do not include this element in the layout at all”.For a more technically-oriented explanation you should look up the documentation for these properties on MDN (
visibility,display) or read the W3C specification (here and here).