CSS Element Types
Ultimately, stylesheets are intended to play no more than a silent and hidden role. They define a protocol for the layout and display of material by a web browser. The actual application of the protocol is done by the web browser after examining the nature of the (X)HTML element to which the CSS rule is being applied. In order to make good use of the power of cascading style sheets it is essential to recognize that there are two categories of element:
- Block Elements:These elements act as containers for other elements. By default they occupy the entire clientwidth of their parent element and resize themselves vertically to fit their contents. However, both these characteristics can be altered via CSS. The area occupied by a block element is made up of a margin, a border, a padding and the actual client area used to display child elements. The most frequently used block element is the div.
- Inline Elements:These elements can be placed within a line of text without breaking up the layout of the text before or after the element. They occupy only as much horizontal space as is required for the display of the element contents. Their most important characteristic is their line-height which depends on the size and type of font used. Inline elements can influence the layout of the text in which they are embedded by virtue of having an excessive line-height requirement. The best known of all inline elements is the anchor element
<a>. The span element is another common inline element. As its name implies it is used to alter the appearance of a "span" of text.
Strictly speaking it makes no sense to adjust the margin or the padding of an inline element. Nevertheless these properties exist and can be legitimately assigned and changed. Why? The reason is that the type of an element, block or inline, is not immutable. It is possible to change the manner in which an element displays by changing its display property to none, block, inline, inline-block etc. Changing the display property can be used to good effect to create pure CSS buttons as described here. It should be noted though that setting position:absolute;, position:fixed; or float:left|right in the CSS rule results in inline elements being converted into block elements. In such circumstances there are legitimate reasons for using the margin and padding properties. However, indiscriminate use of these properties for true inline elements can result in unpredictable and confusing displays.
Can inline elements act as containers for other elements? You would be breaking no rules by placing, say, a list-item inside an anchor. However, the result would be a website that most users would find difficult to use. Needless to say there are legitimate ways of nesting elements inline - for example, anchors inside list-item elements.
