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

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