A key trick to the manipulation of HTML elements is understanding that there’s nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser’s default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.
The most fundamental types of display are inline, block-line and none and they can be manipulated with the display
property and the values inline
, block
and none
.
inline
does just what it says – elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.
block
puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line.
none
, well, doesn’t display the element, which may sound pretty useless but can be used to good effect with accessibility considerations (see Accessible Links), alternate stylesheets or advanced hover effects.
The original default style-sheet for this site for example, manipulates a few traditionally in-line and block-line elements to fit the design.
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
This enabled the title ‘htmldog.com’ and the tag-line to be displayed next to each other rather than above and below each other while maintaining optimum accessibility.
#navigation, #seeAlso, #comments, #standards {
display: none;
}
The above code is used in the print-only styles to basically ‘turn-off’ those elements, such as navigation, which are insignificant to the single page.
display: none
and visibility: hidden
vary in that display: none
takes the element completely out of play, where as visibility: hidden
keeps the element and its flow in place without visually representing its contents. For example, if the second paragraph of 3 were set to display: none
, the first paragraph would run straight in to the third whereas if it were set to visibility: hidden
, there would be a gap where the paragraph should be.
Tables
Perhaps the best way to understand the table-related display property values is to think of HTML tables. table
is the initial display and you can mimic the tr
and td
elements with the table-row
and table-cell
values respectively.
The display
property goes further by offering table-column
, table-row-group
, table-column-group
, table-header-group
, table-footer-group
and table-caption
as values, which are all quite self-descriptive. The immediately obvious benefit of these values is that you can construct a table by columns, rather than the row-biased method used in HTML.
Finally, the value inline-table
basically sets the table without line breaks before and after it.
Getting carried away with CSS tables can seriously damage your accessibility. HTML should be used to convey meaning, so if you have tabular data it should be arranged in HTML tables. Using CSS tables exclusively could result in a mash of data that is completely unreadable without the CSS. Bad. And not in a Michael Jackson way.
Other display types
list-item
is self descriptive and displays as in the way that you would usually expect an li
HTML element to. To work properly then, elements displayed this way should be nested in a ul
or ol
element.
run-in
makes an element either in-line or block-line depending on the display of its parent. It doesn’t work on IE or Mozilla based browsers. Very helpful.
compact
also makes the element inline or block-line depending on the context. It doesn’t work that well either…
marker
is used exclusively with the :before
and :after
pseudo elements to define the display of the value of the content
property. The automatic display of the content
property is already marker
, so this is only useful if you are overriding a previous display
property for the pseudo element.