Trong hướng dẫn này, bạn sẽ học cách điều chỉnh padding của một phần tử bằng CSS.

Thuộc tính padding CSS

    Các thuộc tính padding CSS cho phép bạn đặt khoảng cách giữa nội dung của một phần tử và đường viền của nó (hoặc cạnh hộp của phần tử, nếu nó không có đường viền được xác định).

    Padding bị ảnh hưởng bởi phần tử background-color. Chẳng hạn, nếu bạn đặt màu nền cho một thành phần, nó sẽ hiển thị qua vùng padding.

Xác định Padding cho các mặt riêng lẻ

    Bạn có thể chỉ định padding cho các mặt riêng lẻ của một phần tử, chẳng hạn như các mặt trên, phải, dưới và trái bằng cách sử dụng padding-top, padding-right, padding-bottom và padding-left tương ứng. Hãy thử một ví dụ để hiểu cách thức hoạt động của nó:

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

    Các thuộc tính đệm có thể được chỉ định bằng các giá trị sau:

• length - chỉ định Padding theo px, em, rem, pt, cm, v.v.
• % - chỉ định Padding theo tỷ lệ phần trăm (%) chiều rộng của phần tử chứa.
• inherit - chỉ định rằng Padding phải được kế thừa từ phần tử cha.

    Không giống như margin, các giá trị cho thuộc tính padding không được âm.

Thuộc tính rút gọn Padding

    Thuộc tính padding là một thuộc tính rút gọn để tránh đặt Padding của mỗi bên một cách riêng biệt, tức là padding-top, padding-right, padding-bottom và padding-left.

    Hãy cùng xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:

h1 {
    padding: 50px; /* apply to all four sides */
}
p {
    padding: 25px 75px; /* vertical | horizontal */
}
div {
    padding: 25px 50px 75px; /* top | horizontal | bottom */
}
pre {
    padding: 25px 50px 75px 100px; /* top | right | bottom | left */
}

    Padding có thể nhận một, hai, ba hoặc bốn giá trị được phân tách bằng khoảng trắng.

• Nếu một giá trị được chỉ định, nó sẽ được áp dụng cho cả bốn phía .
• Nếu hai giá trị được chỉ định, thì giá trị đầu tiên được áp dụng cho mặt trên và mặt dưới , còn giá trị thứ hai được áp dụng cho mặt bên phải và bên trái của hộp phần tử.
• Nếu ba giá trị được chỉ định, giá trị đầu tiên được áp dụng cho trên cùng , giá trị thứ hai được áp dụng cho bên phải và bên trái và giá trị cuối cùng được áp dụng cho bên dưới .
• Nếu bốn giá trị được chỉ định, chúng sẽ được áp dụng lần lượt cho trên cùng , bên phải , dưới cùng và bên trái của hộp của phần tử theo thứ tự đã chỉ định.

    Bạn nên sử dụng các thuộc tính tốc ký, nó sẽ giúp bạn tiết kiệm thời gian bằng cách tránh phải nhập thêm và giúp mã CSS của bạn dễ theo dõi và bảo trì hơn.

Tác dụng của Padding và đường viền trên bố cục

    Khi tạo bố cục trang web, việc thêm Padding hoặc đường viền vào các thành phần đôi khi tạo ra kết quả không mong muốn, vì Padding và đường viền được thêm vào chiều rộng và chiều cao của hộp do phần tử tạo ra, như bạn đã học trong chương mô hình hộp CSS .

    Chẳng hạn, nếu bạn đặt chiều rộng của <div> thành 100% và cũng áp dụng Padding hoặc đường viền trái phải cho phần tử đó, thanh cuộn ngang sẽ xuất hiện. Hãy xem một ví dụ:

div {
    width: 100%;
    padding: 25px;
}

    Để ngăn Padding và đường viền thay đổi chiều rộng và chiều cao hộp của phần tử, bạn có thể sử dụng box-sizing. Trong ví dụ sau, chiều rộng và chiều cao của <div> sẽ không thay đổi, tuy nhiên, diện tích nội dung của nó sẽ giảm khi tăng Padding hoặc đường viền.

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

    Bạn sẽ tìm hiểu chi tiết về tính năng định cỡ hộp CSS trong các chương sắp tới.