Tidadigi Logo

CSS inset-block-start Property

Thuộc tính inset-block-start được dùng để định nghĩa offset block start logic. Nó không dùng cho inline offset hoặc block logic. Thuộc tính này áp dụng cho mọi thuộc tính writing-mode.

Cú pháp

inset-block-start: length|percentage|auto|inherit|initial|unset;

Giá trị thuộc tính

Giá trị

Mô tả

length

Đặt một giá trị cố định được xác định bằng px, cm, pt, v.v. Giá trị âm được cho phép. Giá trị mặc định của nó là 0px.

percentage(%)

Tương tự như length, nhưng kích thước được đặt theo tỷ lệ phần trăm kích thước cửa sổ.

auto

Được sử dụng khi muốn trình duyệt tự xác định block-size.

initial

Được sử dụng để đặt giá trị của thuộc tính inset-block-start về giá trị mặc định.

inherit

Được sử dụng khi muốn phần tử kế thừa thuộc tính inset-block-start từ phần tử cha. Nó sẽ dùng thuộc tính đó làm của riêng mình.

unset

Được sử dụng để bỏ đặt (unset) giá trị mặc định của inset-block-start.

Ví dụ 1: Ví dụ dưới đây minh họa thuộc tính inset-block-start trong CSS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS | inset-block-start Property</title>
    <style>
        h1 {
            color: green;
        }

        div {
            background-color: green;
            width: 200px;
            height: 20px;
        }

        .one {
            position: relative;
            inset-block-start: 10px;
            background-color: cyan;
        }
    </style>
</head>

<body>
    <h1>Geeksforgeeks</h1>
    <b>CSS | inset-block-start Property</b>
    <br><br>
    <div>
        <p class="one">
            A Computer Science Portal for Geeks
        </p>
    </div>
</body>

</html>

Đầu ra:

css-inset-block-start-property Ví dụ 2: Dưới đây là một ví dụ khác minh họa thuộc tính inset-block-start trong CSS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS | inset-block-start Property</title>
    <style>
        h1 {
            color: green;
        }

        div {
            background-color: green;
            width: 200px;
            height: 120px;
        }

        .one {
            writing-mode: vertical-rl;
            position: relative;
            inset-block-start: 50px;
            background-color: cyan;
        }
    </style>
</head>

<body>
    <h1>Geeksforgeeks</h1>
    <b>CSS | inset-block-start Property</b>
    <br><br>
    <div>
        <p class="one">
            A Computer Science Portal for Geeks
        </p>
    </div>

</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 inset-block-start được liệt kê dưới đây:

  • Firefox 63
  • Google Chrome 87
  • Edge 87
  • Opera 73
  • Safari 14.1

Last Updated : 20/07/2025