Thuộc tính margin-inline-start trong CSS được dùng để xác định logical inline start margin của một phần tử. Thuộc tính này giúp đặt margin tùy thuộc vào writing mode, directionality và text orientation của phần tử.
Cú pháp:
margin-inline-start: length | auto | initial | inherit | unset;
Giá trị thuộc tính:
- length: Đặt một giá trị cố định được xác định bằng px, cm, pt, v.v. Các giá trị âm được cho phép. Đây là giá trị mặc định của nó.
- auto: Được sử dụng khi muốn trình duyệt xác định độ rộng của margin bên trái.
- initial: Dùng để đặt giá trị của thuộc tính margin-inline-start về giá trị mặc định của nó.
- inherit: Dùng khi muốn phần tử kế thừa thuộc tính margin-inline-start của phần tử cha.
- unset: Được dùng để bỏ đặt margin-block mặc định.
Các ví dụ dưới đây minh họa thuộc tính margin-inline-start trong CSS:
Ví dụ 1:
HTML<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 110px;
height: 110px;
}
.geek {
background-color: purple;
writing-mode: vertical-rl;
margin-inline-start: 20px;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | margin-inline-start Property</b>
<br><br>
<div>
<b class="geek">Cascading Stylesheet</b>
</div>
</center>
</body>
</html>
Đầu ra:
Ví dụ 2:
HTML<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 110px;
height: 110px;
}
.geek {
background-color: purple;
writing-mode: vertical-rl;
margin-inline-start: auto;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | margin-inline-start Property</b>
<br><br>
<div>
<b class="geek">Cascading Stylesheet</b>
</div>
</center>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính margin-inline-start được liệt kê dưới đây:
- Google Chrome 87+
- Edge 87+
- Mozilla Firefox 41+
- Opera 73+
- Safari 12.1+