Css inline style margin

CSS margin-inline Property

Set the margin on both sides in the inline direction:

More «Try it Yourself» examples below.

Definition and Usage

The margin-inline property specifies the margin at the start and end in the inline direction, and is a shorthand property for the following properties:

Values for the margin-inline property can be set in different ways:

If the margin-inline property has two values:

If the margin-inline property has one value:

The CSS margin-inline and margin-block properties are very similar to CSS properties margin-top , margin-bottom , margin-left and margin-right , but the margin-inline and margin-block properties are dependent on block and inline directions.

Note: The related CSS properties writing-mode and direction define inline direction. This affects where the start and end of an element is and the result of the margin-inline property. For pages in English, block direction is downward and inline direction is left to right.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.marginInline=»50px 10px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Источник

margin-inline

The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element’s writing mode, directionality, and text orientation.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* values */ margin-inline: 10px 20px; /* An absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: revert; margin-inline: revert-layer; margin-inline: unset; 

This property corresponds to the margin-top and margin-bottom , or the margin-right and margin-left properties, depending on the values defined for writing-mode , direction , and text-orientation .

The margin-inline property may be specified using one or two values.

• When one value is specified, it applies the same margin to both start and end.
• When two values are specified, the first margin applies to the start, the second to the end.

Values

The margin-inline property takes the same values as the margin property.

Formal definition

• margin-inline-start : 0
• margin-inline-end : 0

• margin-inline-start : if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
• margin-inline-end : if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto

Formal syntax

Examples

Setting inline start and end margins

CSS

div  background-color: yellow; width: 120px; height: auto; border: 1px solid green; > p  margin: 0; margin-inline: 20px 40px; background-color: tan; > .verticalExample  writing-mode: vertical-rl; > 

HTML

div> p>Example textp> div> div class="verticalExample"> p>Example textp> div> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

margin

The margin CSS shorthand property sets the margin area on all four sides of an element.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Apply to all four sides */ margin: 1em; margin: -3px; /* top and bottom | left and right */ margin: 5% auto; /* top | left and right | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* Global values */ margin: inherit; margin: initial; margin: revert; margin: revert-layer; margin: unset; 

The margin property may be specified using one, two, three, or four values. Each value is a , a , or the keyword auto . Negative values draw the element closer to its neighbors than it would be by default.

• When one value is specified, it applies the same margin to all four sides.
• When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
• When three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom.
• When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

Values

The size of the margin as a fixed value.

The size of the margin as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode ) of the containing block.

The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

Description

This property can be used to set a margin on all four sides of an element. Margins create extra space around an element, unlike padding , which creates extra space within an element.

The top and bottom margins have no effect on non-replaced inline elements, such as or .

Horizontal centering

To center something horizontally in modern browsers, you can use display : flex; justify-content : center; .

However, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use margin: 0 auto; .

Margin collapsing

Elements’ top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins. See Mastering margin collapsing for more information.

Formal definition

• margin-bottom : 0
• margin-left : 0
• margin-right : 0
• margin-top : 0

• margin-bottom : the percentage as specified or the absolute length
• margin-left : the percentage as specified or the absolute length
• margin-right : the percentage as specified or the absolute length
• margin-top : the percentage as specified or the absolute length

Formal syntax

Examples

Simple example

HTML

div class="center">This element is centered.div> div class="outside">This element is positioned outside of its container.div> 

CSS

.center  margin: auto; background: lime; width: 66%; > .outside  margin: 3rem 0 0 -3rem; background: cyan; width: 66%; > 

More examples

margin: 5%; /* All sides: 5% margin */ margin: 10px; /* All sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: 10px margin */ /* left and right: 3% margin */ /* bottom: -1em margin */ margin: 10px 3px 30px 5px; /* top: 10px margin */ /* right: 3px margin */ /* bottom: 30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* Box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* Box is horizontally centered */ 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Introduction to the CSS basic box model
• Margin collapsing
• margin-top , margin-right , margin-bottom , and margin-left
• The mapped logical properties: margin-block-start , margin-block-end , margin-inline-start , and margin-inline-end and the shorthands margin-block and margin-inline

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник