CSS Display

There are different ways you can display or hide an element using CSS Display and CSS Visibility. Let’s begin at the ways we can hide an element.

visibility:hidden; this declaration will hide the element from the users screen, but the page still acts as if it was there. So, if you have a div that is 500×500px, and you use visibility:hidden; the contents (and background) of that div will not show, but there will be a large whitespace instead.

display:none; is similar to visibility:hidden; in that the element cannot be seen, but instead of just showing a whitespace the element is totally removed. It is as though the element is not even there.

There are three modes of displaying elements on-screen. The first is display:inline;, this makes the element continue with the flow of the page. A good way of explaining this is with a flow of text. Let’s a assume you have a paragraph of 3,000 lines, on line 500 you have an inline element that just makes it’s content text red, this text will flow with the rest of the content. Now let’s imagine that same element was display:block;, the red text would begin on it’s own line, and the remainder of the original div would then start on it’s own line. Some good examples of block elements are divs, h1 (h2, h3, …), p. Some examples of inline elements are span and a.

There is an in-between declaration of display:inline-block;, which allows a block element to appear in the flow of the text. Block elements can be styled more solidly than inline elements; so let’s say you have styled your a tag with display:block; with some other attributes to make it look like a button. If you want this button to follow the flow of text then display:inline-block; is the ideal solution.