CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



margin-inline-start

The margin-inline-start property is a CSS property that is used to set the margin of an element on the inline-start side. The inline-start side is the side of an element that is on the left in a left-to-right language, and on the right in a right-to-left language. This property is used to create space between the element and the adjacent element on the inline-start side.

The margin-inline-start property is a shorthand property that combines the margin-top, margin-bottom, and margin-left properties. It is used to set the margin of an element on the inline-start side in a single declaration.

The margin-inline-start property is supported in all major browsers, including Chrome, Firefox, Safari, and Edge.

Examples

Here are some examples of how to use the margin-inline-start property:

Example 1:

In this example, we will set the margin of a paragraph element on the inline-start side to 20 pixels:

  
    <p style="margin-inline-start: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  

Example 2:

In this example, we will set the margin of a div element on the inline-start side to 10 pixels, and the margin of the same element on the inline-end side to 20 pixels:

  
    <div style="margin-inline-start: 10px; margin-inline-end: 20px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  

Example 3:

In this example, we will set the margin of a span element on the inline-start side to 5 pixels, and the margin of the same element on the inline-end side to 10 pixels:

  
    <span style="margin-inline-start: 5px; margin-inline-end: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  

Conclusion

The margin-inline-start property is a useful CSS property that is used to set the margin of an element on the inline-start side. It is supported in all major browsers, and can be used to create space between elements on the left or right side of the page, depending on the language used.

References

Activity