Welcome, visitor! [ Login

Ins and Outs of the CSS Display Property

CSS Tutorial Guide 17/12/2012

If you want to manipulate HTML elements, then you need to first understand that there’s nothing so special about how each element work. Meaning, most web pages could be constructed using just several tags that could by stylized in any way you want to. Browser’s visual representation usually includes differing HTML element’s styles, padding, margin, and their display types.

CSS – Ins and Outs of the Display Property

In this article, we’ll cover the display property in detail.

Basically, there are three display types – inline, block-line, and none. So we can manipulate them using the CSS display property along with inline, block, and none values.

1. Display Values

There are three display values in CSS – inline, block, and none – that you can use to manipulate HTML elements any way you choose to.

a. Inline

Elements having inline values display as a flow of a line. For example, emphasis, anchor, and strong elements are usually displayed inline.

b. Block

Block creates a line break between elements that’s before and after it. For example, headers and paragraphs are HTML elements that are usually displayed as block.

c. None

Element having ‘none’ as display value don’t display at all, not a very useful thing you might think at first. But ‘display: none’ can be used to achieve good effects, especially on advanced hovering navigation bar.

2. ‘Display: none’ Vs ‘Visibility: hidden’

What’s the difference between display: none and visibility: hidden? Well these two CSS properties and values differ in a way that ‘display: none’ completely wipes out an element from its position, allowing other element before or after it to take its place, while ‘visibility: hidden’ keeps its element’s position stacked without displaying its content.

For instance, if there were three separate paragraph, and the second was set to ‘display: none’, then the first paragraph would display right above the third. But if it was set to ‘visibility: hidden’, then there would still be a huge gap between the first and third paragraph as the element still preserves its position without displaying anything.

3. Display Properties on Tables

The easiest way to comprehend table-related display properties is to think of the actual HTML tables themselves. The initial display is the table, and the subsequent ‘tr’ and ‘td’ elements can be mimicked by using the ‘table-row’ and ‘table-cell’ display values.

In addition to ‘table-row’ and ‘table-cell’, display property for tables also includes several other values – table-header-group, table-column, table-row-group, table-column-group, table-footer-group – so that you can quickly mimic HTMl tables using pure CSS as they are fairly self-explanatory.

With this method, you can quickly construct tables using columns, instead of the usual row-based method found in HTML.

And then, there’s another display value to mimic table – inline-table – that fundamentally displays the table without any line breaks just before and after it.

It’s not uncommon to use these table-based CSS display properties and values as they seem an alternate method to quickly create CSS-based tables in your tables. But on the other hand, using CSS tables for that matter can be fatal as they might hurt your web page accessibility. HTML elements are properly used to convey sensible meanings. That means if you’re using any tabular data in your HTML document, you should always opt to arranging them in HTML tables, rather than other way around. Using CSS tables explicitly to display tabular data could result into crash of data that’s totally illegible if CSS fails to load.

4. Few More Display Types

a. list-item

The list-item display value is self-explanatory in a way that it displays elements exactly the same as any <li> elements would. So for it to display properly, you’ll still require to put the list items inside the regular old <ul> or <ol> HTML tags.

b. marker

By default, every content property is ‘marker’ already. So it would only make sense to use it to override previous display property for the pseudo element. The display property is especially used with ‘: before’ and ‘: after’ pseudo elements to set the display value of the content property.

c. run-in

The ‘run-in’ display value makes an element display as either as in-line or block-line – depending on its parent display. However, Mozilla and IE don’t support this display type, but still it’s very helpful nonetheless.

d. compact

‘compact’ is similar to ‘run-in’ display type as it also makes element appear as either in-line or block-line depending on where it’s displayed. But the bad news is that it doesn’t work that well.

Summary of CSS – Ins and Outs of the Display Property

Fundamentally, HTML elements are displayed as in-line, block-line, and none. So basically, you can manipulate these different display types of any elements used inside an HTML element by using the CSS display property and values – inline, block, and none.

No Tags

27 total views, 1 today


Leave a Reply