Let's start with some basic terminology related to the material covered this week with boxes. These terms will also be used in future weeks when we discuss positioning.
- Block-level element
- An element such as a paragraph, heading, or DIV.
- Block-level elements generate 'new lines' before and after their element boxes. Block-level elements stack vertically in the normal flow, one after another.
- Box Model
- A specification of the element box which describes the relative positions of content area, padding, borders, margin, background color and background image in all three dimensions.
- Collapsing Margins
- Margins collapse when adjoining margins of two block-level elements in the normal flow combine to form a single margin. The resulting margin width is the maximum of the adjoining margin widths. In CSS2, horizontal margins never collapse.
- Containing Block
- A containing block is the block-level parent of a block-level element. Every block-level element is laid out and positioned relative to its containing block.
- Content Area
- The content area is at the core of the box model. The content area contains text or images within the opening and closing tags of the element
- Element Box
- This is the spatial rectangular area occupied by any element. The content area, padding, borders and margin constitute the element box.
- Inline element
- This is an element such as strong, em, span, or images. These elements do not generate "line breaks" before or after themselves, and they are descendants of a block-level element.
- Non-replaced element
- This is an element whose content is contained within the document. For example, paragraphs and headings are non-replaced elements because the textual content is found within the element itself.
- Normal flow
- This is the left to right, top to bottom rendering of text in Western Languages and the familiar text layout of traditional HTML documents.
- Most elements are in the normal flow, and the only way for an element to leave the normal flow is to be floated or positioned (covered in future weeks). For this week, we will cover boxes in terms of the "normal" flow.
- Each block-level element follows another block-level element, in terms of vertical spacing.
- Positioning
-
The
position
property is at the heart of CSS-based layouts. This determines the reference point for the positioning of each element box in the document. - Replaced element
- This is an element which serves as a placeholder for something else. The classic example of a replaced element is the img tag, which simply points to an image file that is inserted into the document's flow at the point where the IMG tag is found.
- Root element
- This is the element at the top of document tree. Depending upon the UA being used, this can be the HTML element or the BODY element.
- Visible Box
- Content area, padding and border are referred to as the visible box. Though padding is always transparent, it can be exposed by the element's border or background. Visible box is often called visible portion of box.
- Z-Index
- Z-index represents the stacking order for element boxes that overlap. Elements with a higher Z-index may obscure overlapping elements with a lower Z-index.