Trong CSS, inset-inline property được dùng để xác định offset đầu và cuối theo dòng logic. Nó không dùng cho offset khối hoặc khối logic. Property này có thể áp dụng cho mọi writing-mode.
Cú pháp:
inset-inline: length|percentage|auto|inherit|initial|unset;
Giá trị của property:
- length: Đặt một giá trị cố định bằng px, cm, pt, v.v. Giá trị âm được cho phép và mặc định là 0px.
- percentage: Tương tự length nhưng tính theo phần trăm kích thước cửa sổ.
- auto: Giá trị mặc định khi trình duyệt xác định block-size.
- initial: Đặt giá trị của property inset-inline về mặc định.
- inherit: Phần tử kế thừa property inset-inline từ phần tử cha.
- unset: Hủy giá trị mặc định của inset-inline.
Các ví dụ sau minh họa inset-inline property trong CSS:
Ví dụ 1:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS | inset-inline Property</title>
<style>
h1 {
color: green;
}
div {
background-color: green;
width: 200px;
height: 120px;
}
.one {
position: relative;
inset-inline: 30px 50px;
background-color: cyan;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | inset-inline Property</b>
<br>
<br>
<div>
<p class="one">
A Computer Science Portal for Geeks
</p>
</div>
</center>
</body>
</html>
Kết quả:
Ví dụ 2:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS | inset-inline Property</title>
<style>
h1 {
color: green;
}
div {
background-color: green;
width: 200px;
height: 120px;
}
.one {
writing-mode: vertical-rl;
position: relative;
inset-inline: 30px 50px;
background-color: cyan;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | inset-inline Property</b>
<br>
<br>
<div>
<p class="one">
A Computer Science Portal for Geeks
</p>
</div>
</center>
</body>
</html>
Kết quả:
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ inset-inline property được liệt kê dưới đây:
- Google Chrome 87+
- Firefox 63+
- Edge 87+
- Opera 73+
- Safari 14.1+