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