Margin - Property CSS
This page is also about physical property(ies):
margin-topmargin-rightmargin-bottommargin-leftAnd the logical properties:
margin-blockmargin-block-startmargin-block-endmargin-inlinemargin-inline-startmargin-inline-endSummary of characteristics of the margin property
auto0Computed value: during an animation, the margin property gradually changes from one value to another.Syntax diagram of margin..
margin property.The links in the diagram provide access to more details. .
Description of the terms used in the diagram:
lengthis a numeric value followed by one of the CSS dimension units or a percentage.
Description of the margin property.
margin defines the size of the margins, i.e. the placeholder around the element, outside its border.
Not to be confused with padding that is handled by the padding property.
margin is a shorthand property that allows you to define the values of the four margins, i.e. the properties:
margin-top: top margin.margin-right: right margin.margin-bottom: bottom margin.margin-left: left margin.
margin accepts from 1 to 4 values, but in all cases, all four margins are changed: even if only one value
is specified, it will be applied to all four margins (see syntax details below).
Margins are counted from the parent element if the element is a single child (no other elements in the this parent), or from the previous and next elements when there are other elements in the parent.
Margin merge.
The top and bottom margins between successive blocks are not added: the browser applies the margin that is the largest. This merge mechanism only occurs for margins in the vertical direction: if blocks are displayed side-by-side, their left and right margins do not merge.
If the margins were added
With the merging of margins
See also the margin-trim property for more information on managing margins between elements of the same type.
Centering of an element of the block type.
When the right and left margins are set to auto, they cause the element to center within the width of its parent.
Language support.
If text in a non-Latin language is envisaged (Arabic or CJK for example), it is better reason with the so-called "logical" properties, i.e. those that take into account the writing mode. For example, Arabic languages are written from right to left, which is the opposite of Latin (European) languages which are written from left to right. The logical properties for margins are as follows:
margin-block-start: margin at the beginning of the block, equivalent tomargin-topfor European languages.margin-block-end: margin at the end of the block, equivalent tomargin-bottomfor European languages.margin-inline-start: margin at the beginning of lines, equivalent tomargin-leftfor European languages.margin-inline-end: margin at the end of lines, equivalent tomargin-rightfor European languages.
Two short hand properties must be added:
margin-block: accepts two values that correspond tomargin-block-startandmargin-block-end.margin-inline: accepts two values that correspond tomargin-inline-startandmargin-inline-end.
Note: The short hand property margin only handles physical margins, so its effect will be independent of the writing mode.
The simulator below gives the equivalences for the main language families.
margin-topmargin-leftmargin-rightmargin-bottomValues for margin.
- margin: auto;
Margins are determined by the browser. They can be different depending on the type of element (p, div...).
Particularity: when the right and left margins are both set at theautovalue, they result in the horizontal centering of the element. This feature is not valid in the vertical direction. - margin: 15px 10px 10px 0px; a b c d
From one to four numbers that define the size of the margins.
These are positive or negative numbers, followed by a unit of dimension (see CSS dimension units) and separated by spaces.
Note: Negative values can shift the clip out of the visible area.Percentages are calculated relative to the width of the parent, which makes sense for margins horizontal (
margin-leftandmargin-right), but may be surprising in the case of vertical margins (margin-topandmargin-bottom).
Calculating the vertical margins relative to the height of the parent element would lead to a circular calculation insoluble. Indeed, the height of a block is determined by its content (unless it is fixed with theheightproperty). However, the height of the content depends on the margins of the internal elements. If these also depended on the height of the parent, we would have a big problem of circular calculation.In fact, the use of percentages for vertical margins is generally of little interest.
Here's how the values are assigned based on the number of values shown:
- If only one value is specified, it applies to all four margins.
- If two values are specified,
- the first defines the upper and lower margins,
- The second value defines the left and right margins. - When three values are specified, they define
- the top margin,
- the left and right margins,
- the bottom margin. - Finally, if the four values are specified, they define each of the margins, in the following order:
- top margin,
- right margin,
- bottom margin,
- left margin.
margin:a;
A single value.
margin:a b;
Two values.
margin:a b c;
Three values.
margin:a b c d;
Four values. - margin: initial; (
0) margin: inherit; margin: revert; margin: revertLayer; margin: unset;These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,unset.
Animation of the margin property.
Margin animation is often used to give the impression of a block moving across the screen.
Manipulating the margin property programmatically.
The codes given below are given for margin-top but will be easily modified to fit the other properties relating to margins.
With Javascript, change the value of margin.
Javascript supports two syntaxes to change the value of margin-top.
The first syntax uses the typical CSS notation (the kebab-case: a hyphen to separate words), while the second syntax
is closer to the usual Javascript syntax, with camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['margin'] = '2cm';
// or
let el = document.getElementById('id');
el.style.margin = '2cm';
With Javascript, read the value of margin.
Rereading the value of margin-top in Javascript can also be done according to two syntaxes.
The property must have been assigned directly to the element itself by its style attribute, and not to a class or other CSS selector.
let el = document.getElementById('id');
let value = el.style['margin'];
// or
let el = document.getElementById('id');
let value = el.style.margin;
With Javascript, read the computed value of margin.
To read the computed value of margin-top, use the following code. The margin is returned in pixels or in percentages, whatever
the unit that was used to define it in the style sheet.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('margin');
With JQuery, change the value of margin.
With JQuery, two syntaxes are also possible to modify the value of the margin-top property of the el element:
$('#id').css('margin', '2cm');
With JQuery, read the computed value of margin.
As in Javascript, the margin is returned in pixels or percentages.
let value = $('#id').css('margin');
Test it yourself.
The buttons below display either the value as applied for the first button or the computed value for the second button.
This second option allows you to see how the value of margin is stored (serialized). In particular, we note
that the percentages are well remembered as percentages (see the chapter on inheritance).
All other units are converted to pixels.
Simulator.
The simulator below will help you familiarize yourself with the notion of the beginning of a block, the beginning of a line, etc. depending on language. Margins are shown in blue.
"The margins are an aesthetic foundation of the layout, which anchors the place of the text by encircling it with a silent space. They bring out the text to give it all its thickness and install a tranquility conducive to reading. The margins also have an ergonomic role; large backgrounds allow thumbs to rest, small backgrounds avoid text to get lost in the binding."
Browsers compatibility with margin.
margin is probably one of the oldest properties of CSS: it is recognized by all browsers.
The logical properties (taking into account the way the language is written) are more recent but are now well recognized as well.
margin, margin-top, margin-right, margin-bottom and margin-left physical properties.margin-inline, margin-inline-start and margin-inline-end that define the margins in relation to the language writing mode.margin-block, margin-block-start and margin-block-end that define the margins in relation to the language writing mode.marginproperty
margin-inlineproperty
margin-blockproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
QQ Browser
Safari sur IOS
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Opéra
Safari
Firefox
Chrome pour Androïd
Samsung Internet
Chrome
Edge
Androïd Brower
Opéra mini
Browsers compatibility with margin.
The definition of margins was already provided for in the very first CSS language specification. It has changed little since then.
The biggest change is the addition of logical properties, which take into account the writing mode according to the the language: margin-block.
and margin-inline.
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
Regardingmargin. First specification of the CSS language.
First definition of themarginproperty and the longhand properties for each edge.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingmargin. Changed the calculation of margins when expressed as percentages.
Theinheritvalue is accepted for margins.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Box Model Module Level 3
Regardingmargin. Clarification regarding the calculation of margins in the case of a ruby annotation.July 26, 2001Working Draft.
December 22, 2020Candidate Recommendation.February 16, 2023Proposed for recommendation.April 06, 2023Recommendation . -
CSS Logical Properties and Values Level 1
Regardingmargin. Introduction of logical properties (dependent on the writing mode) to define the margins.May 18, 2017Working Draft. -
CSS Box Model Module Level 4
Regardingmargin. No modification to themargin...properties themselves, but addition of themargin-trimproperty which interacts in the calculation of the margins.April 21, 2020Working Draft.
See also, on the calculation of margins.
Margins (inner and outer) are described in this module of the CSS specification: CSS Box Model Module. The following definitions are also described in this same module.
Properties: