The CSS margin-inline-end property is used to define the logical inline-end margin of an element. It adjusts the margin based on the element's writing mode, direction, and text orientation.
- Sets the margin at the end of the inline direction.
- Adapts automatically to different writing modes and text directions.
- Helps create flexible and internationalized layouts.
Syntax:
margin-inline-end: length | auto | initial | inherit | unset;Property values
- length: Sets a fixed margin value using units such as px, cm, or pt. Negative values are allowed. The default value is 0px.
- auto: Allows the browser to calculate the margin automatically.
- initial: Sets the property to its default value.
- inherit: Inherits the margin-inline-end value from the parent element.
- unset: Resets the property to its inherited or initial value, as appropriate.
Examples of margin-inline-end Property
Below examples illustrate the margin-inline-end property in CSS:
Example 1: The margin-inline-end: 15px property adds space at the inline-end side of the first vertical box, creating a gap between the two text boxes.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | margin-inline-end Property</title>
<!--Driver Code Ends-->
<style>
h1 {
color: green;
}
.container {
background-color: yellow;
width: 120px;
padding: 10px;
display: flex;
justify-content: center;
}
.box1 {
writing-mode: vertical-rl;
background-color: purple;
color: white;
padding: 5px;
margin-inline-end: 15px;
}
.box2 {
writing-mode: vertical-rl;
background-color: darkmagenta;
color: white;
padding: 5px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>CSS margin-inline-end Property</h3>
<div class="container">
<div class="box1">Styled text</div>
<div class="box2">Connecting text</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Example 2: The margin-inline-end: auto property automatically consumes the available inline space, pushing the adjacent element toward the inline-end side.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | margin-inline-end Property</title>
<!--Driver Code Ends-->
<style>
.container {
display: flex;
width: 300px;
background: yellow;
}
.geek {
background: purple;
color: white;
padding: 10px;
margin-inline-end: auto;
}
.box {
background: green;
color: white;
padding: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<div class="geek">First Box</div>
<div class="box">Second Box</div>
</div>
</body>
</html>
<!--Driver Code Ends-->