CSS Box Model Overview

Each element in a web page is treated as a box, with properties controlling its size, position, and appearance.

Used to create elements that take up the full width of their container.

Used to create elements that only take up the space needed for their content.

The space between the content of an element and its border.

The line that surrounds the content of an element.

The space between an element and the adjacent elements.

Describes how each element is rendered as a box in a web page.

Allows for control and customization over how elements are laid out and styled on web pages.

CSS property that controls how the width of an element is calculated, including padding and border.

The space between an element's border and its content. It affects the size of the element without affecting its position.

The space that surrounds an element and defines its separation from other elements. It affects both the size and position of an element.

A line that surrounds the content of an element. It can have different styles and thickness and adds to the element's total width.

A layout model in CSS that treats each element as a box, with properties for its size, position, and content. It includes padding, border, and margin.

The content within the element, including text, images, and other elements.

CSS property used to center a block-level element horizontally within its parent element. It sets both left and right margins to 'auto'.

A method of aligning block-level elements by positioning them next to each other, often used in combination with the 'float' property.

A powerful layout model that allows for flexible and responsive design. It provides complete control over alignment and distribution of elements.

A CSS property that allows the element to take the entire width of its container.

A box that takes up the full width of its container and appears on its own line. Common examples include headings (h1-h6) and paragraphs (p).

A box that only takes up the space needed for its content and typically doesn't affect vertical spacing. Common examples include spans (span) and strong (strong).

A CSS property that controls how an element is displayed, including whether it's a block, inline, or other display types.

The default type of box used by HTML elements like headings, paragraphs, and lists.

The default type of box used by HTML elements like spans, strong, and emphasis.

A CSS property that can be used to change the default type of box for HTML elements. For example, you can turn an inline element into a block element.

The standard method used by web browsers to render HTML documents. The browser automatically arranges elements in a top-to-bottom order.

Inline elements do not affect the vertical spacing around them when margins are applied. Only the horizontal margins are displayed.

Block-level elements take up the full width of their container, and margins affect both vertical and horizontal space around them.

When two adjacent block-level elements have vertical margins, only the larger margin is displayed, effectively collapsing the smaller one.

To prevent margin collapsing, insert an element with non-zero height between the elements with margins.

A , meaning a , element doesn't affect the semantic structure of the HTML document but provides a hook for CSS styling.

The element, which takes up the entire width of its parent container.

The element, which takes up the space needed by its contents.

The property in CSS sets the explicit width of an element, overriding its automatic size depending on content.

The property in CSS sets the explicit height of an element.

A space around the content of an element is defined by the and properties, but they are not part of the actual measured width or height of an element as defined by and properties.

The property in CSS sets the explicit dimensions of the content area of an element.

The property in CSS sets the explicit dimensions of the content area plus padding and border of an element. It is like defining the actual occupied size of an element on the page.