CSS margin-inline Tutorial

CSS margin-inline

The margin-inline property in CSS is used to set the margin on the inline axis of an element. This property is useful for controlling the space between inline elements, such as text or inline-block elements.

The margin-inline property accepts length values (such as px, em, %), as well as the auto and initial keywords.

Let's look at some examples to understand how the margin-inline property works:

Result: CSS margin-inline Example

Example Text 1

Example Text 2

In the example above, we have two inline-block <p> elements with a margin of 20px set using the margin-inline property. This creates space between the two elements.

It's important to note that the margin-inline property only works on elements that have a display value of inline-block or inline. It does not work on block-level elements.

Let's see another example using the margin-inline property to create space between two inline elements:

Result: CSS margin-inline Example Example 1 Example 2

In this example, we have two inline <span> elements with a background color and a margin-inline of 30px. This creates space between the two elements on the inline axis.

Experiment with different values for the margin-inline property to see how it affects the spacing between inline elements on a webpage.