CSS margin-left Property


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
Applies to
All elements
Computed value
As specified, but with relative lengths converted into absolute pixel values.
JavaScript syntax


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


  • <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


<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>
.parent { 
   background: #e2edc1;
   padding: 10px;
.child { 
   border: 3px solid #333391; 
   padding: 10px;
   margin: 10px;
   margin-left: 40px;

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

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

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 25th September 2023