Tidadigi Logo

CSS padding-left Property

Padding là khoảng trống giữa nội dung và đường viền của nó. Thuộc tính padding-left trong CSS dùng để thiết lập độ rộng vùng padding bên trái phần tử.

Syntax:

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

Property values:

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

Example 1: Trong ví dụ này, chúng ta đang sử dụng thuộc tính padding-left: length.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        padding-left Property
    </title>
    <style>
        .geek {
            padding-left: 90px;
            color: white;
            background: green;
        }
    </style>
</head>

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

    <h2 style="text-align:center">
        padding-left Property
    </h2>

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

Output: css-padding-left-property

Example 2: Trong ví dụ này, chúng ta đang sử dụng thuộc tính padding-left: percentage.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        padding-left Property
    </title>
    <style>
        .geek {
            padding-left: 25%;
            color: white;
            background: green;
        }
    </style>
</head>

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

    <h2 style="text-align:center">
        padding-left Property
    </h2>

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

Output: css-padding-left-property

Supported Browsers: Các trình duyệt được hỗ trợ bởi thuộc tính padding-left đượ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