Tidadigi Logo

CSS padding-right Property

`Padding` là khoảng trắng giữa nội dung và đường viền của nó. Thuộc tính `padding-right` trong CSS dùng để đặt độ rộng vùng `padding` bên phải phần tử.

Syntax: 

padding-right: length | percentage | initial | inherit;

Property values: 

  • length: Chế độ này dùng để chỉ định kích thước `padding` dưới dạng giá trị cố định. Giá trị mặc định là 0. Giá trị phải không âm.
  • percentage: Chế độ này dùng để đặt `padding` bên phải theo phần trăm chiều rộng phần tử. Giá trị phải không âm.
  • initial: Thuộc tính này dùng để đặt giá trị mặc định.

Example: Trong ví dụ này chúng ta dùng thuộc tính `padding-right: length`.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        padding-right Property
    </title>

    <style>
        .geek {
            padding-right: 200px;
            color: white;
            background: green;
            width: 50%;
            font-size: 18px;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h2>
        padding-right Property
    </h2>

    <!-- padding-right property used here -->
    <p class="geek">
        This paragraph has a padding-right: 200px;
    </p>
</body>
</html>

Output: 

css-padding-right-property

Example:  Trong ví dụ này chúng ta sử dụng thuộc tính `padding-right: percentage`.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        padding-right Property
    </title>
    <style>
        .geek {
            padding-right: 40%;
            color: white;
            background: green;
            width: 50%;
            font-size: 18px;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        padding-right Property
    </h2>

    <!-- padding-right property used here -->
    <p class="geek">
        This paragraph has a padding-right: 40%;
    </p>
</body>
</html>

Output: 

css-padding-right-property

Example: Trong ví dụ này chúng ta sử dụng thuộc tính `padding-right: initial`.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        padding-right Property
    </title>

    <style>
        .geek {
            padding-right: initial;
            color: white;
            background: green;
            width: 70%;
            font-size: 25px;
        }
    </style>
</head>

<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h2>
        padding-right Property
    </h2>

    <!-- padding-right property used here -->
    <p class="geek">
        This paragraph has a padding-right: initial;
    </p>
</body>
</html>

Output: 

css-padding-right-property

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

  • Google Chrome 1.0 trở lên
  • Edge 12.0 trở lên
  • Internet Explorer 4.0 trở lên
  • Firefox 1.0 trở lên
  • Opera 3.5 trở lên
  • Apple Safari 1.0 trở lên

Last Updated : 21/07/2025