Tidadigi Logo

CSS max-inline-size Property

Thuộc tính CSS max-inline-size đặt chiều rộng hoặc chiều cao tối đa của một phần tử. Điều này phụ thuộc vào chế độ viết của nó. Thuộc tính này đặc biệt hữu ích để kiểm soát kích thước phần tử inline. Các phần tử inline như văn bản hoặc hình ảnh nằm trong một vùng chứa.

Đối với chế độ viết ngang (như ngôn ngữ từ trái sang phải) nó kiểm soát chiều rộng tối đa. Trong khi đó, với chế độ viết dọc nó kiểm soát chiều cao tối đa. Thuộc tính này giúp duy trì tính nhất quán của bố cục. Nó cũng ngăn chặn tình trạng tràn nội dung.

Syntax

max-inline-size: auto | value | initial |inherit;

Property values

Property ValueDescriptions
<length>Chỉ định một độ dài cố định (ví dụ: pixel hoặc em).
<percentage>Chỉ định tỷ lệ phần trăm kích thước của vùng chứa.
max-contentCho phép phần tử mở rộng đến kích thước nội dung tối đa.
min-contentGiới hạn phần tử ở kích thước nội dung tối thiểu.
fit-contentThay đổi kích thước phần tử để phù hợp với nội dung trong giới hạn.
fill-availableLấp đầy không gian có sẵn bên trong vùng chứa.
autoTrình duyệt sẽ tự động xác định kích thước tối đa.

Example 1: Các ví dụ dưới đây minh họa thuộc tính max-inline-size property trong CSS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS max-inline-size Property</title>
    <style>
        h1 {
            color: green;
        }

        div {
            background-color: lightblue;
            border: 2px solid green;
            max-inline-size: 100px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <div>
        <p>
            GeeksforGeeks is an online
            study platform for the geeks.
        </p>
    </div>
</body>

</html>

Output:css-max-inline-size-property Example 2: Một cách triển khai khác của thuộc tính CSS max-inline-size Property.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>CSS | max-inline-size Property</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

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

        .one {
            position: relative;
            max-inline-size: auto;
            background-color: cyan;
        }
    </style>
</head>

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

</html>

Output:

Supported Browsers

Các trình duyệt được hỗ trợ bởi max-inline-size property được liệt kê dưới đây:

  • Firefox 41
  • Google Chrome 57
  • Edge 79
  • Opera 44
  • Safari 12.1

Last Updated : 20/07/2025