CSS Box Model Specification

Status of this document

CSS Specification Example

1. Introduction

This specification defines the box model used in CSS, which describes the layout and rendering of elements on a web page.

1.1. Box Model Overview

The box model consists of the following components:

Content box: The inner area where the element’s content is displayed.
Padding: The space between the content box and the element’s border.
Border: The line that surrounds the content and padding.
Margin: The space between the element and its neighboring elements.

1.2. Box Model Properties

The following properties control the box model:

1.2.1. width

Value: `[length] | [percentage] | auto`
Default: `auto`
Description: Sets the width of the element’s content box.

1.2.2. height

Value: `[length] | [percentage] | auto`
Default: `auto`
Description: Sets the height of the element’s content box.

1.2.3. padding

Value: `[length] | [percentage]`
Default: `0`
Description: Sets the padding space around the element’s content box.

1.2.4. border

Value: `[border-width] | [border-style] | [color]`
Default: `none`
Description: Sets the border of the element.

1.2.5. margin

Value: `[length] | [percentage]`
Default: `0`
Description: Sets the margin space around the element.

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Conformant Algorithms

Requirements phrased in the imperative as part of algorithms (such as "strip any leading space characters" or "return false and abort these steps") are to be interpreted with the meaning of the key word ("must", "should", "may", etc) used in introducing the algorithm.

Conformance requirements phrased as algorithms or specific steps can be implemented in any manner, so long as the end result is equivalent. In particular, the algorithms defined in this specification are intended to be easy to understand and are not intended to be performant. Implementers are encouraged to optimize.