Margin property
The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
Tiny CSS Projects
A CSS property that sets the space outside an element's border on each side.
- How it is used
- Spaces interface elements, centers width-limited layouts, and adjusts card content across screen sizes.
- How deep it goes
- Works through side-specific and shorthand values, auto centering, negative margins, browser defaults, and margin collapse in concrete layouts.
- Examples
- Uses a centered newspaper, checkout cards, form controls, and a profile image protruding above its card.
- What you can do after
- Apply it via CSS to control outer gaps, center constrained content, and correct spacing failures caused by defaults or collapsing margins.
CSS in Depth, Second Edition
The CSS margin property sets the outer spacing around an element, with physical sides including top, bottom, left, and right margins.
- How it is used
- Uses margins to center constrained columns and control outside spacing in page layouts.
- How deep it goes
- Explains auto margins, shorthand order, spacing trade-offs, and line-height effects, while only briefly noting margin collapse.
- Examples
- Works through a centered content column, hero-image spacing, navigation gaps, and heading-to-paragraph spacing.
- What you can do after
- Apply it via CSS to center a constrained block and choose outside spacing without mistaking visible text gaps for margin values.
Read how CSS in Depth, Second Edition explains margin property →
Web Design Playground, Second Edition
The CSS margin property specifies the space outside an element's border.
- How it is used
- Controls spacing between elements, text blocks, and viewport edges within the CSS box model.
- How deep it goes
- Explains the box-model role, side properties, units, negative values, shorthand order, defaults, and resets.
- Examples
- Uses paragraph spacing, a pull quote, navigation lists, surrounding content, and a four-sided shorthand declaration.
- What you can do after
- Apply margin declarations and shorthand to create spacing, separation, intentional overlap, and responsive layouts.
Read how Web Design Playground, Second Edition explains margin property →
Web Design Playground
A CSS property controlling the outer spacing around an element that separates it from neighboring content.
- How it is used
- Organizes page elements through outer spacing, supporting the design principle of proximity.
- How deep it goes
- Defines margins within the box model, demonstrates four side properties and shorthand, and notes defaults, resets, negative values, and units.
- Examples
- Uses a pull quote, paragraph bottom spacing, a reset rule, and styled ul and div elements.
- What you can do after
- Apply it via CSS properties to separate elements, space paragraphs, use shorthand, and deliberately create overlap.
Build a Website with ChatGPT
A margin property specifies the outer space surrounding an element's border.
- How it is used
- Controls spacing between page elements and the browser viewport.
- How deep it goes
- Defines side-specific and shorthand declarations, including positive spacing and negative overlap.
- Examples
- Uses a footer with four distinct margins and an equivalent shorthand declaration.
- What you can do after
- Apply spacing through CSS side properties, shorthand declarations, and adjusted pixel values.
Read how Build a Website with ChatGPT explains margin property →
Related concepts
- paddingcontrasts with · Padding is the addition of extra space, values, or data around or within a structure to satisfy size, alignment, layout, or processing requirements.
- collapsing marginused by · Collapsing margin is CSS behavior in which adjoining vertical margins combine into a single effective margin rather than being added together.
- CSS box modelpart of · The CSS box model represents each element as a rectangular box comprising content, padding, border, and margin areas.
- user-agent styleconfigured by · A user-agent style is a default set of presentation rules supplied by a browser for rendering document elements when author styles do not override them.
- element boxpart of · An element box is the rectangular CSS layout representation of an element, including its content, padding, border, and margin areas.
- hypertext linkconfigures · A hypertext link is a reference embedded in digital content that enables navigation to another resource or location.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.