These are two separate things:
- Display governs whether space is left on the page for the element:
- display:none means the element takes up no space
- display:block means the element is displayed as a block element
- display:inline means the element is displayed as an in-line element
- there are a range of other display options described on w3schools
- Visibility makes the element visible or not
- visible should be fairly obvious!
- hidden means that the element still takes up space but is not visible
So you could have an image which was displayed (space is left for it) but invisible:
#fred {
display:block;
visibility:hidden;
}
This would be useful for mouse over effects (e.g. buttons or image changes) and using JavaScript for DHTML. That comes later.
