导航|地址|刷新
Introduction to the CSS box model - CSS …



Skip to main content

Skip to search



MDN





HTML

HTML: Markup language

HTML reference
Elements

Global attributes

Attributes

See all…
HTML guides
Responsive images

HTML cheatsheet

Date & time formats

See all…
Markup languages
SVG

MathML

XML




CSS

CSS: Styling language

CSS reference
Properties

Selectors

At-rules

Values

See all…
CSS guides
Box model

Animations

Flexbox

Colors

See all…
Layout cookbook
Column layouts

Centering an element

Card component

See all…




JavaScriptJS

JavaScript: Scripting language

JS reference
Standard built-in objects

Expressions & operators

Statements & declarations

Functions

See all…
JS guides
Control flow & error handing

Loops and iteration

Working with objects

Using classes

See all…




Web APIs

Web APIs: Programming interfaces

Web API reference
File system API

Fetch API

Geolocation API

HTML DOM API

Push API

Service worker API

See all…
Web API guides
Using the Web animation API

Using the Fetch API

Working with the History API

Using the Web speech API

Using web workers




All

All web technology

Technologies
Accessibility

HTTP

URI

Web extensions

WebAssembly

WebDriver

See all…
Topics
Media

Performance

Privacy

Security

Progressive web apps




Learn

Learn web development

Frontend developer course
Getting started modules

Core modules

MDN Curriculum

Check out the video course from Scrimba, our partner
Learn HTML
Structuring content with HTML module
Learn CSS
CSS styling basics module

CSS layout module
Learn JavaScript
Dynamic scripting with JavaScript module




Tools

Discover our tools


Playground

HTTP Observatory

Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator




About

Get to know MDN better


About MDN

Advertise with us

Community

MDN on GitHub




Blog





Toggle sidebar
Web

CSS

Guides

Box model

Introduction

Theme

OS default

Light

Dark



English (US)

Remember language Learn more

Deutsch

English (US)

Español

Français

日本語

한국어

Português (do Brasil)

Русский

中文 (简体)







Introduction to the CSS box model


When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.





In this article

Content area

Padding area

Border area

Margin area

See also



Content area

The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

If the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.



Padding area

The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.

The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.



Border area

The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.

The thickness of the borders are determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. When there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e., extends underneath the border in z-ordering). This default behavior can be altered with the background-clip CSS property.



Margin area

The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin box width and the margin box height.

The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height property, even though the borders and padding are still displayed around the content.



See also

CSS box model module

Layout and the containing block

Introducing the CSS Cascade

Learn: Handling conflicts

CSS key concepts:
CSS syntax

At-rules

Comments

Specificity

Inheritance

Layout modes

Visual formatting model

Margin collapsing

Values:
Initial values

Computed values

Used values

Actual values


Value definition syntax

Shorthand properties

Replaced elements







Help improve MDN
Was this page helpful to you?
Yes No
Learn how to contribute
This page was last modified on Nov 20, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content




Filter sidebar Clear filter input


CSS

Guides

Modules
Anchor positioning

Animations

Backgrounds and borders

Basic user interface

Borders and box decorations

Box alignment

Box model

Box sizing

Cascading and inheritance

Color adjustment

Colors

Compositing and blending

Conditional rules

Containment

Counter styles

CSSOM view

Custom functions and mixins

Custom highlight API

Custom properties for cascading variables

Display

Easing functions

Environment variables

Filter effects

Flexible box layout

Font loading

Fonts

Fragmentation

Gaps

Generated content

Grid layout

Images

Inline layout

Lists and counters

Logical properties and values

Masking

Media queries

Motion path

Multi-column layout

Namespaces

Nesting

Overflow

Overscroll behavior

Paged media

Positioned layout

Properties and values API

Pseudo-elements

Round display

Ruby layout

Scoping

Scroll anchoring

Scroll snap

Scroll-driven animations

Scrollbars styling

Selectors

Shadow parts

Shapes

Syntax

Table

Text

Text decoration

Transforms

Transitions

Values and units

View transitions

Viewport

WebXR DOM overlays

Will change

Writing modes


Anchor positioning
Using anchor positioning

Handling overflow

Anchored container queries


Animations
Animatable properties

Using animations


Backgrounds and borders
Using multiple backgrounds

Resizing background images

Scaling SVG backgrounds


Borders and box decorations
border-shape nav menu


Box alignment
Overview

In block layout

In flexbox

In grid layout

In multi-column layout


Box model
Introduction

Margin collapsing


Box sizing
Aspect ratios


Cascade
Introduction

Inheritance

Specificity

Property value processing

Shorthand properties


Cascading variables
Using custom properties


Colors
Applying color

Color values

Using relative colors

Using color wisely

Accessibility: Colors and luminance

Accessibility: Color contrast


Columns
Basic concepts

Styling columns

Using multi-column layouts

Spanning and balancing columns

Handling overflow

Handling content breaks


Conditional rules
Using feature queries

Using container scroll-state queries


Containment
Container queries

Using containment

Using container size and style queries


Counters
Using counters


CSSOM view
Coordinate systems (API)

Viewport concepts


Custom functions and mixins
Using CSS custom functions


Display
Block and inline layout

Flow layout

Flow layout and overflow

Flow layout and writing modes

In flow and out of flow

Layout and the containing block

Formatting contexts

Block formatting context

Inline formatting context

Using multi-keyword syntax

Visual formatting model


Environment variables
Using environment variables


Filter effects
Using filter effects


Flexbox
Basic concepts

Flexbox and other layouts

Aligning flex items

Ordering flex items

Controlling flex item ratios

Wrapping flex items

Typical use cases


Fonts
OpenType features

Variable fonts

WOFF


Grid
Basic concepts

Grid and other layouts

Using line-based placement

Grid template areas

Using named grid lines

Using auto-placement

Aligning items

Logical values and writing modes

Grid layout and accessibility

Common grid layouts

Subgrid

Masonry layout


Images
Using gradients

Using object-view-box

Styling replaced elements

Implementing image sprites


Lists
Indenting lists


Logical properties
Basic concepts

For floating and positioning

For margins, borders, and padding

For sizing


Masking
Introduction

Clipping

Multiple masks

Mask properties


Media queries
Using media queries

For accessibility

Testing

Printing


Nesting
Nesting at-rules

Nesting and specificity

Using nesting


Overflow
Creating carousels


Positioning
Stacking context

Stacking floating elements

Understanding z-index

Using z-index

Stacking without z-index


Properties and Values API
CSS Houdini

Registering custom properties in CSS


Scroll anchoring
Overview


Scroll-driven animations
Scroll-driven animation timelines

Understanding timeline insets

Understanding timeline range names


Scroll snap
Basic concepts

Using scroll snap events


Selectors
Selectors and combinators

Selector structure

Privacy and :visited

Using :target


Shapes
Overview

Box-value shapes

Image-based shapes

Using shape-outside

Shape generator


Syntax
Introduction

Comments

At-rules

Error handling


Text
Wrapping and breaking text

Handling whitespace


Text decoration
Text shadows


Transforms
Using transforms


Transitions
Using transitions


Values and units
Value definition syntax

Numeric data types

Textual data types

Using math functions

Using typed arithmetic


Writing modes
Introduction

Vertical form controls


How to

Layout cookbook
Media objects

Column layouts

Center an element

Sticky footers

Split navigation

Breadcrumb navigation

List group with badges

Pagination

Card

Grid wrapper

Contribute a recipe
Cookbook template



Tools


Border-image generator

Border-radius generator

Box-shadow generator

Color format converter

Color mixer

Shape generator


Reference

Properties
-moz-*
-moz-float-edge

-moz-force-broken-image-icon

-moz-orient

-moz-user-focus

-moz-user-input


-webkit-*
-webkit-border-before

-webkit-box-reflect

-webkit-mask-box-image

-webkit-mask-composite

-webkit-mask-position-x

-webkit-mask-position-y

-webkit-mask-repeat-x

-webkit-mask-repeat-y

-webkit-tap-highlight-color

-webkit-text-fill-color

-webkit-text-security

-webkit-text-stroke

-webkit-text-stroke-color

-webkit-text-stroke-width

-webkit-touch-callout


Custom properties (--*): CSS variables

accent-color

align-*
align-content

align-items

align-self


alignment-baseline

all

anchor-name

anchor-scope

animation-*
animation-composition

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-range

animation-range-end

animation-range-start

animation-timeline

animation-timing-function


animation

appearance

aspect-ratio

backdrop-filter

backface-visibility

background-*
background-attachment

background-blend-mode

background-clip

background-color

background-image

background-origin

background-position

background-position-x

background-position-y

background-repeat

background-repeat-x

background-repeat-y

background-size


background

baseline-shift

baseline-source

block-size

border-*
border-block

border-block-color

border-block-end

border-block-end-color

border-block-end-style
…(内容过长已截断)

------
导航页 打开网址