Margin inline element

what happens margin to inline element.

1 Like

@jarugullaganapathi
Margin properties specify the width of the (margin-area) of a box. The ‘margin’ shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.
For examples:

margin-inline: 10% 15%;writing-mode: horizontal-tb;

margin-inline: 10px 40px;writing-mode: vertical-rl;

The margin-inline property specifies the margin at the start and end in the inline direction, and is a shorthand property for the following properties:

  • margin-inline-start
  • margin-inline-end

Values for the margin-inline property can be set in different ways:

If the margin-inline property has two values:

  • margin-inline: 10px 50px;
    • margin at start is 10px
    • margin at end is 50px

If the margin-inline property has one value:

  • margin-inline: 10px;
    • margin at start and end is 10px

The CSS margin-inline and margin-block properties are very similar to CSS properties margin-top, margin-bottom, margin-left and margin-right, but the margin-inline and margin-block properties are dependent on block and inline directions.

Note: The related CSS properties writing-mode and direction define inline direction. This affects where the start and end of an element is and the result of the margin-inline property. For pages in English, block direction is downward and inline direction is left to right.

@aarumane143
Nice explanation :+1:

@ kaushal-ta-ds thank you Sir :slightly_smiling_face: :slightly_smiling_face:

1 Like

@aarumane143
keep it up :heartbeat: