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:
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:
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.