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



margin-inline-end

Margin-Inline-End is a CSS property that defines the space between an element's inline-end edge and the inline-start edge of its containing block. It is used to create space between an element and its adjacent element in the inline direction.

The margin-inline-end property is a part of the CSS Box Model. It is used to control the space around an element. The margin-inline-end property is used to set the margin on the inline-end side of an element. The inline-end side is the side of an element that is opposite to the inline-start side.

The margin-inline-end property can be used with any HTML element that has an inline display property. It is commonly used with text, images, and other inline elements.

Code Examples

Here are some examples of how to use the margin-inline-end property in CSS:

Example 1:

This example sets the margin-inline-end property to 20px:

  
    p {
      margin-inline-end: 20px;
    }
  

Example 2:

This example sets the margin-inline-end property to a percentage value:

  
    p {
      margin-inline-end: 10%;
    }
  

Example 3:

This example sets the margin-inline-end property to a negative value:

  
    p {
      margin-inline-end: -10px;
    }
  

Example 4:

This example sets the margin-inline-end property to auto:

  
    p {
      margin-inline-end: auto;
    }
  

The auto value for the margin-inline-end property is used to center an element horizontally within its containing block.

Conclusion

The margin-inline-end property is a useful CSS property that can be used to control the space around an element in the inline direction. It is commonly used with text, images, and other inline elements. By using the margin-inline-end property, you can create a more visually appealing and organized layout for your web pages.

References

Activity