CSS margin-left Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

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

CSS

.parent { 
   background: #e2edc1;
   padding: 10px;
} 
.child { 
   border: 3px solid #333391; 
   padding: 10px;
   margin: 10px;
   margin-left: 40px;
}

Result

Editor