The margin-inline-start property in CSS is used to define the logical inline start margin of an element. This property helps to place margin depending on the element's writing mode, directionality, and text orientation.
- Sets the margin at the start of the inline direction.
- Adapts automatically to different writing modes and text directions.
- Helps create flexible and internationalized layouts.
Syntax:
margin-inline-start: 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-start value from the parent element.
- unset: Resets the property to its inherited or initial value, as appropriate.
Examples of margin-inline-start Property
Below examples illustrate the margin-inline-start property in CSS:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS | margin-inline-start Property</title>
<!--Driver Code Ends-->
<style>
body {
background-color: #dcdcdc;
font-family: "Times New Roman", serif;
}
h2 {
font-size: 20px;
}
.container {
width: 90px;
height: 90px;
background-color: yellow;
margin-left: 50px;
}
.box {
width: 28px;
height: 70px;
background-color: purple;
color: black;
writing-mode: vertical-rl;
text-align: center;
margin-inline-start: 30px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>CSS | margin-inline-start Property</h2>
<div class="container">
<div class="box">
Cascading
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->