Tidadigi Logo

CSS | padding-block Property

padding-block property trong CSS dùng để xác định logical block start và end padding của một phần tử. Thuộc tính này giúp đặt padding theo writing mode, directionality và text orientation của phần tử.
Syntax: 
 

padding-block: length|percentage|auto|inherit|initial|unset;


Property values: 
 

  • length: Nó thiết lập một giá trị cố định được xác định bằng px, cm, pt... Các giá trị âm cũng được cho phép. Giá trị mặc định của nó là 0px.
  • percentage: Nó giống như length, nhưng đặt kích thước padding-block theo phần trăm kích thước cửa sổ.
  • auto: Nó được sử dụng khi trình duyệt xác định kích thước padding-block.
  • initial: Nó được dùng để đặt giá trị của thuộc tính padding-block về giá trị mặc định.
  • inherit: Nó được dùng khi phần tử kế thừa thuộc tính padding-block từ phần tử cha.
  • unset: Nó được dùng để bỏ đặt giá trị thuộc tính padding-block mặc định.


Ví dụ sau minh họa padding-block property trong CSS:
Example 1: 
 

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS | padding-block Property</title>
    <style>
        h1 {
            color: green;
        }
        
        div {
            background-color: yellow;
            width: 110px;
            height: 80px;
        }
        .two {
            padding-block: 20px 40px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | padding-block Property</b>
        <br><br>
        <div class="one">A Computer</div>
        <div class="two">Science Portal</div>
        <div class="three">For Geeks</div>
    </center>
</body>

</html>

Output: 
 

css-padding-block-property


Example 2: 
 

html 
<!DOCTYPE html>
<html>

<head>
    <title>CSS | padding-block Property</title>
    <style>
        h1 {
            color: green;
        }
        
        div {
            background-color: yellow;
            width: 110px;
            height: 80px;
        }
        .two {
            padding-block: 20px 40px;
            writing-mode: vertical-lr;
            background-color: purple;
        }
    </style>
</head>

<body>
    <center>
        <h1>Geeksforgeeks</h1>
        <b>CSS | padding-block Property</b>
        <br><br>
        <div class="one">A Computer</div>
        <div class="two">Science Portal</div>
        <div class="three">For Geeks</div>
    </center>
</body>

</html>

Output: 
 

css-padding-block-property


Supported Browsers: Các trình duyệt được hỗ trợ bởi padding-block property được liệt kê dưới đây:
 

  • Firefox
  • Google Chrome
  • Edge
  • Opera


Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block
 


Last Updated : 20/07/2025