HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference
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.

#ikea {
	display: table;
}