Thuộc tính margin-block-start property dùng để xác định logical block start margin của phần tử. Thuộc tính này giúp đặt margin tùy theo writing mode, directionality, và text orientation.
Syntax:
margin-block-start: length | auto | initial | inherit;
Property values:
- length: Nó thiết lập giá trị cố định được xác định bằng px, cm, pt. Các giá trị âm được cho phép như đã đề cập trước đó. 0px là giá trị mặc định.
- auto: Nó được sử dụng khi muốn trình duyệt xác định chiều rộng của left margin.
- initial: Nó được dùng để đặt giá trị của thuộc tính margin-left về giá trị mặc định.
- inherit: Nó được dùng khi muốn phần tử kế thừa thuộc tính margin-left của phần tử cha.
Các ví dụ dưới đây minh họa thuộc tính margin-block-start property trong CSS:
Example 1:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS | margin-block-start Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 110px;
height: 80px;
}
.two {
margin-block-start: 20px;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | margin-block-start Property</b>
<br><br>
<div class="one">GeeksforGeeks</div>
<div class="two">GFG</div>
<div class="three">GeeksforGeeks</div>
</center>
</body>
</html>
Output:
Example 2:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS | margin-block-start Property</title>
<style>
h1 {
color: green;
}
div {
background-color: yellow;
width: 110px;
height: 80px;
}
.two {
margin-block-start: auto;
writing-mode: vertical-lr;
background-color: purple;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<b>CSS | margin-block-start Property</b>
<br><br>
<div class="one">GeeksforGeeks</div>
<div class="two">GFG</div>
<div class="three">GeeksforGeeks</div>
</center>
</body>
</html>
Output:
Supported Browsers: Các trình duyệt được hỗ trợ bởi margin-block-start property được liệt kê dưới đây:
- Google Chrome 87+
- Edge 87+
- Firefox 41+
- Opera 73+
- Safari 12.1+