CSS Display and Visibility

Semantic HTML essentially provides us with two classifications of elements according to their span of new lines - inline and block.

Inline elements like span, a, button etc take on the same line in which they are defined whereas block elements like div, p, h1 etc take on a new line.

What this visually means is this:

<p>A paragraph</p>
<div>A div</div>

As you can see the two elements above p and div both take on new lines and are hence defined as block elements.

Compared to this, following we have two inline elements (styled differently).

<p>Hello <span>World!</span></p>
<div>Some <b>bold</b> text.</div>

And now as you can see the elements here span and b are taking on the same lines as of the text they are defined within; and hence they are defined as inline elements.

Furthermore, just for the sake of listing down some other differences between these two classifications, block elements can be given vertical padding, margins, width and height values whereas inline ones can't. Inline elements can only be spaced in the horizontal plane and can't take any custom height or width values.

Go on and try to style the inline span elements in the examples above. See what you get!

However this is just the default characteristic of the elements that we've showed you; block for div and p and inline for span and b. Using the display property in CSS we can change this characteristic of any element - blocks can be inlined and inlines can be blocked whatever - so let's go on to discover it.

The display property is used to defined how elements will be displayed within their containers. It can take a whole ton of values but for this chapter we are concerned with these four only: inline, block, inline-block and none.

display: inline

display: inline displays the given element as an inline element, taking on the same line.

Following we turn the block element p into an inline element using the display property:

p {display: inline}

Notice how the text a paragraph! floats inline with the previous text.

If you compare this with the example below (with default display) you can probably get the hang of the difference between inline and block:

And if we style the paragraph even more to differentiate between inline and block we get the following. Try to compare both the cases.

A block p (default):

p {
    padding: 15px;
    background-color: #ddd;
}

An inline p:

p {
    display: inline;
    width: 200px;
    background-color: #ddd;
}

display: block

display: block displays the given element as a block element, taking on a new line.

So for instance we can turn the inline elements, in the example above, into block elements:

span {display: block}

Now go above and compare this with the previous example. Did you notice the difference? The span element over here takes on a new line and also all of the available area (notice till where the border goes) since it is no longer an inline element.

And again let's compare the span element in both its displays.

An inline span (default):

span {
    width: 200px;
    background-color: #ddd;
}

An block span:

span {
    display: block;
    width: 200px;
    background-color: #ddd;
}

display: none

display: none, as the name might suggest, hides an element COMPLETELY from the document. As opposed to visibility: hidden, which just hides the content as you will see later in this chapter, this rule removes the given element entirely - including both the content and the bounding box.

Consider the example below where you can actually see how display: none works on the second paragraph.

Without any CSS:

With display: none:

display: inline-block

Now after such a long discussion on various values for display can you guess what this value does?

display: inline-block is one of the most commonly used values in web pages around the globe since it makes the given element appear inline but have all the benefits of block elements.

It makes the element an inline block i.e a block element which is inline.

So where inline can't be styled in its width or height and block can't be made to flow in the same line (at least uptil now) the value inline-block sits between both of them allowing developers to enjoy both the cases in one deal!

Following we have the same span element's example as above but this time using the inline-block value:

span {
    display: inline-block;
    width: 200px;
    background-color: #ddd;
}

And as you can see this time the element even flows inline and gets the width applied. Finally!

In CSS, visibility as the name implies defines whether an element is visible or invisible in the document.

The values include:

1. visible: makes the element visible - this is the default value for all elements on an HTML page.
2. hidden: makes the element hidden, but its bounding box is still there.

Let's now see how each value works. Consider the HTML below:

<p>Some text</p>
<p id="p2">Some more text</p>

To explain the property visibility the best we will make the second p element take over a considerable amount of space in the vertical plane so that you can easily distinguish between visible and hidden values.

#p2 {
    height: 100px;
    background-color: #ddd;
}

#p2 {
    visibility: visible; /* default value */
}

#p2 {
    visibility: hidden;
}

Comparing this with display: none we can see that this hides the element completely.

#p2 {
    display: none;
}

CSS displays are an indespensable concept when it comes to learning web layout designing. Visibility on the other hand helps in animation and transition cases therefore it follows that both these properties are vital in web pages generally.

Make sure you practise them pretty well - getting hang of the value names, their purposes and so on.

Rememeber even the simplest of things can become complex if not practised!