What is margin left in css

CSS margin-left Property

The margin-left property sets the left margin of an element.

Note: Negative values are allowed.

Default value:	0
Inherited:	no
Animatable:	yes, see individual properties. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.marginLeft=»100px» Try it

Browser Support

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

CSS Syntax

Property Values

Value	Description	Demo
length	Specifies a fixed left margin in px, pt, cm, etc. Default value is 0px. Negative values are allowed. Read about length units	Demo ❯
%	Specifies a left margin in percent of the width of the containing element	Demo ❯
auto	The browser calculates a left margin	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the left margin for a

element to 10% of the width of the container:

Example

Set the left margin for a

element to 2 em:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin — Individual Sides

CSS has properties for specifying the margin for each side of an element:

All the margin properties can have the following values:

• auto — the browser calculates the margin
• length — specifies a margin in px, pt, cm, etc.
• % — specifies a margin in % of the width of the containing element
• inherit — specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

Margin — Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

  Example

  Use the margin shorthand property with four values:

  If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

    Example

    Use the margin shorthand property with three values:

    If the margin property has two values:

    • margin: 25px 50px;
      • top and bottom margins are 25px
      • right and left margins are 50px

      Example

      Use the margin shorthand property with two values:

      If the margin property has one value:

      Example

      Use the margin shorthand property with one value:

      The auto Value

      You can set the margin property to auto to horizontally center the element within its container.

      The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

      Example

      The inherit Value

      Example

      div <
      border: 1px solid red;
      margin-left: 100px;
      >

      All CSS Margin Properties

      Property	Description
      margin	A shorthand property for setting all the margin properties in one declaration
      margin-bottom	Sets the bottom margin of an element
      margin-left	Sets the left margin of an element
      margin-right	Sets the right margin of an element
      margin-top	Sets the top margin of an element

      Источник

      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.

      Источник

      margin-left

      The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

      Try it

      The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

      In the rare cases where width is overconstrained (i.e., when all of width , margin-left , border , padding , the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.

      Syntax

      /* values */ margin-left: 10px; /* An absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /* Keyword values */ margin-left: auto; /* Global values */ margin-left: inherit; margin-left: initial; margin-left: revert; margin-left: revert-layer; margin-left: unset; 

      The margin-left property is specified as the keyword auto , or a , or a . Its value can be positive, zero, or negative.

      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 left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of margin-left and margin-right are both auto , the calculated space is evenly distributed. This table summarizes the different cases:

      Value of display	Value of float	Value of position	Computed value of auto	Comment
      inline , inline-block , inline-table	any	static or relative	0	Inline layout mode
      block , inline , inline-block , block , table , inline-table , list-item , table-caption	any	static or relative	0 , except if both margin-left and margin-right are set to auto . In this case, it is set to the value centering the element inside its parent.	Block layout mode
      block , inline , inline-block , block , table , inline-table , list-item , table-caption	left or right	static or relative	0	Block layout mode (floating element)
      any table-* , except table-caption	any	any	0	Internal table-* elements don’t have margins, use border-spacing instead
      any, except flex , inline-flex , or table-*	any	fixed or absolute	0 , except if both margin-left and margin-right are set to auto . In this case, it is set to the value centering the border area inside the available width , if fixed.	Absolutely positioned layout mode
      flex , inline-flex	any	any	0 , except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.	Flexbox layout mode

      Formal definition

      Initial value	0
      Applies to	all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter and ::first-line .
      Inherited	no
      Percentages	refer to the width of the containing block
      Computed value	the percentage as specified or the absolute length
      Animation type	a length

      Formal syntax

      Examples

      Percentage values for margin-left are relative to the container’s inline size.

      Источник