Cascading Style Sheets/Box Model

Block-level and inline elements &#8211; the property
W3C Specification CSS1 CSS2.1

CSS has no understanding of the semantics of the underlying document. In particular it has no idea that the  elements in the HTML fragment below should start on a new line whilst the   element should not. The property provides this information.

CSS1 defines four values for. CSS2.1 adds two more general purpose values plus a number of values for creating tables. The table values are described in Displaying Tables. The values are explained in detail in later sections.
 * &#8211; this causes the element to start a new line.
 * (CSS2.1)
 * (CSS2.1)
 * (CSS2.1)
 * (CSS2.1)
 * (CSS2.1)

Note: in CSS1 the initial value for is. Under CSS2.1 this changes to. This property should be explicitly set for all element types that can occur in a document to ensure consistency between different implementations. Most web browsers will set appropriate values for elements in (X)HTML documents. (See Appendix D of the CSS 2.1 Specification for the suggested values.) In XML documents use a rule such as to set the  property for all element types. Then use more specific rules to set the value for individual element types.

The value affects the set of other properties that are valid for an element. For example the list properties are only valid if is . In the example below no bullets appear on the list items because  has been set to.

CSS rule:

Sample HTML:

Example rendering:

An element with set to  starts a new line. It also acts as a container for the content of its child elements.

Elements with set to  flow with other content within the containing box of their nearest  ancestor. They do not start new lines.

The and  properties are not valid on non-replaced inline elements. In (X)HTML documents replaced elements are embedded content such as images.

The alignment of inline elements is controlled by the property. The initial value for this property is. Since (X)HTML images are normally elements this means that the bottom edge of images are aligned with the baseline of the text. If there is no text on the line the web browser must still calculate where the baseline would be and leave the appropriate amount of room for it. This can cause problems when trying to align images.

is similar to except that it enables the list properties, ,  and.

When is  the web browser must act as though the element and all its child elements do not exist. This can't be overridden by setting the property on the child elements because they don't exist to have properties applied to them. The web browser must not leave any space on the display or print out or speak any of the content or give any other hint of the existence of the element.

Hiding elements with this value can be very useful in conjunction with CSS2.1 media types. For example you can specify that the navigation bar is removed from the printed page by setting its value to  for print media.

If you want to simply hide the element whilst leaving a visible gap set the CSS2.1 property to.

An element flows in the same manner as an  element but it acts as a  container for its own children.

allows a single element to be merged into the start of a element that follows it immediately. The element will only be merged if it doesn't contain any  elements. If a element can't be merged it acts as though it was a  element.

CSS rule:

Sample HTML: element is allowed.

Example rendering:

Interaction with
If the property for an element is set to anything other than  the element behaves as though  is set to  regardless of its actual value.

The Box Model
The CSS box model is fundamental to laying out documents with CSS. The content of every element is rendered within one or more boxes. A CSS box consists of:
 * the content area,
 * surrounded by padding (optional),
 * surrounded by borders (optional),
 * surrounded by margins (optional).

If all three optional parts of the box are present then crossing the box from one outer margin edge to the content the following boundaries are encountered: as illustrated by the following diagram. This is the margin. This is the border. This is the padding. This is the content area.
 * outer margin edge
 * outer border edge = inner margin edge
 * outer padding edge = inner border edge
 * content edge = inner padding edge

Height and Width

 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

is ignored by non-replaced inline elements, table columns and table column groups.

is ignored by non-replaced inline elements, table rows and table row groups.

The and  properties specify the dimensions of the content area (but see the section on quirks mode below). This is the distance from the inner edge of the padding on one side to the inner edge of the padding on the other side. The values may be given as non-negative lengths or percentages. If is given as a percentage the value is based on the width of the containing block. If is given as a percentage the value is based on the height of the containing block. If the height of the containing block is not an absolute value percentages may not work as expected. Refer to the W3C Specification for details.

It is usual to give the size of elements containg text in s or percentages. Images and other replaced elements are normally sized in pixels.

CSS rule:

Sample HTML:

Example rendering:

Notice that the left edge of the text (the contents) touches the left edge of the background (the content area).

If the content area is too small the contents will overflow the box (except in Internet Explorer).

CSS rule:

Sample HTML:

Example rendering (this example does not work in Internet Explorer):

CSS2.1 minimum and maximum width and height

 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1

CSS2.1 introduces four extra properties, , and. For example, suppose you are creating a layout with two columns side by side on the page. You want the column for the main content to be 27 wide but no more than 75% of the page width. The navigation column should be 9 or 25%. The appropriate rules would be:

The property is often used with a length in pixels to ensure that a column does not become too narrow for the images it contains.

Internet Explorer does not support these CSS2.1 properties.

Internet Explorer Quirks Mode
Internet Explorer versions 5.0 and 5.5 allow and  on non-replaced inline elements. Internet Explorer version 6 also applies these properties if it is in quirks mode. In standards mode it correctly ignores them on non-replaced inline elements.

In quirks mode and  incorrectly set the distance between the outer edges of the borders not the edges of the content area.

CSS 3 Box Models
The current draft of CSS3 introduces a new property,. This property takes one of two values, or.

When the value is set to the normal CSS1/CSS2.1 box model is used so  and  define the size of the content area.

When the value is set to the  and  properties set the distance between the outer edges of the borders, i.e. the box behaves like a quirks mode box.

Mozilla Firefox does not support but instead uses  for the same purpose.

Padding
Padding is blank space inserted between the content of the element and its border. The element's background is seen through the padding. The padding is set by four properties:
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

The padding can either be set to a length, e.g., or a percentage, e.g. . Values must not be negative. Percentages are relative to the width of the containing block even for the top and bottom padding.

CSS rules:

Sample HTML:

Example rendering:

Shorthand property
W3C Specification CSS1 CSS2.1

The padding on all four sides can be set at once using the shorthand property. This takes a list of whitespace separated values. The first value is the top padding. The other values work clockwise round the sides, so right is second, bottom is third and left is last. The previous example could be shortened to: You can specify fewer than four values in the list for. If the value for the left padding is missing it is set equal to the right padding. If the value for the bottom padding is missing it is set equal to the top padding. If only the top padding is given all the sides are given the same padding.

always sets the padding on all four sides. If you want to alter the padding on only some of the sides you must use the individual properties.

Margins
Margin is the outermost layer in the CSS box model, located outside of border.

CSS properties that enable setting of the width of the margin:
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

Shorthand property
W3C Specification CSS1 CSS2.1

Box shadow
Box shadow is a part of CSS3. It creates a drop shadow that follows the shape of the box. It is currently supported by WebKit and Gecko. Box shadow takes 4 arguments and supports multiple shadows.



 This box should have a sharp rectangular shadow to the lower right.

 This box should have a sharp round shadow to the lower right.

 This box should have a red diffuse round shadow to the upper left.

 This box should have a red, green and blue diffuse round shadows to the lower right.

Box Sizing
Box-sizing is a CSS3 property to make certain layouts simpler. Box-sizing is supported by WebKit, Gecko and Presto.

take 1 argument that is any of the following:
 * boxes inside arrange normally.
 * boxes inside arrange around the border.
 * inherit the parent behavior.
 * boxes inside arrange around the border.
 * inherit the parent behavior.
 * inherit the parent behavior.

CSS fragment:

HTML fragment:

This should be on the left. This should be on the right. The two boxes should be above this text side by side if your browser supports.

CSS/Disegnare la struttura della pagina