What is the difference between CSS display and visibility

[Zebaril]

Hi,
I need some basic examples to get a comparison detail between CSS visibility and display. How to use them both and what are the effects generated by them. Both normal looks similar to me. Also what are the other values that comes to this category. I am making site for a project works where I want to shows up boxes with options in the middle of the page. Thanks in advance.

[Praetor]

There is a difference between both the CSS tags. The first visibility looks something like this. h2 {visibility:hidden;} and on the other hand display value looks like this p.inline{display:inline;}. Display property is supported by all types of web browser. This both property are used to hide a element on the page. If you assign a hidden or none value respective to the property then the chosen element stays hidden on the page.

[Katty]

There are more property values which comes in the visibile. There are as follows. First visible, this value is the default one. By the element is visible on the page. Then comes hidden which hides the row or column. It is used for tables only. After that you can use collapse. This value show up the hidden element in the page. After that inherit value allows you to get the visibility property of the main element.

[kelfro]

The values visibility and display are normally used for tables only. Display is supported by all the types of web browsers. In the display value like none gives you an empty element with not box, block will gives you a block box, inline will give you a inline box, inline-block will give you a block box which is laid out as the inline box, then inline table gives you the table, list-item gives you a inline box for the list, run-in gives you a block or inline box that normally depends on the context, etc. There are more values available under display then visibility tag.