CSS Basic Boxes
2008 Oct 17
Every element has a rectangular region called the element box which has
four parts. Also the content and padding background can be a color or (an
optionally tiled) image. Margins are always transparent allowing the background of
the parent element(s) to be visible. Padding cannot be negative, but margins can
be negative. Borders have a set of possible styles and a color (which defaults to
the color of the element's contents).
The containing block is formed by the content edge of the nearest block-level,
table cell or inline-block ancestor box.
- normal flow : left to right, top to bottom (
direction dependent).
Changed by being floated or positioned.
- nonreplaced element : one whose content is in the document
(e.g. <p>)
- replaced element : one whose content is pointed to in the document
(e.g. <img>, form element <input>)
- block-level element : generate "new lines" before and after their boxes,
and hence stack vertically, e.g. <div> or <p>. Any element can be made
into a block-level with
display: block.
- inline-level element : does not generate "new lines" before and after
their boxes, and are descendents of a block-level element; e.g. <span>.
Any element can be made into an inline-level with
display: inline.
- root element : is at top of document tree. In HTML documenst this is
<html>. In XML it can be whatever is permitted.