CSS margin-left Property

Description

The margin-left CSS property is used to set the amount of space or margin between the left edge of an element and its adjacent elements. It specifies the distance, in pixels, em units, percentages, or other supported units, by which an element's content should be offset from its containing block's left edge. This property is commonly used for layout purposes to create spacing between elements within a webpage, ensuring proper alignment and visual separation. By adjusting the margin-left value, designers and developers can control the horizontal positioning of elements on a page, contributing to the overall design and structure of a website or application.

Initial value
0
Applies to
All elements
Inherited
No
Computed value
As specified, but with relative lengths converted into absolute pixel values.
Animatable
Yes
JavaScript syntax
object.style.marginLeft

Interactive Demo

Margin Left Example

Syntax

margin-left: <length> | <percentage> | auto

Values

  • <length>Specifies a fixed length, using any standard CSS length units. Negative Values are allowed.
  • <percentage>A percentage always relative to the width of the containing block.
  • inherit

Example

<div class="parent"> 
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
.parent { 
   background: #e2edc1;
   padding: 10px;
} 
.child { 
   border: 3px solid #333391; 
   padding: 10px;
   margin: 10px;
   margin-left: 40px;
}

Browser Support

The following table will show you the current browser support for the CSS margin-left property.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 2nd January 2024