Tìm hiểu về Padding trong CSS
Học Css bắt đầu với Hello, World
Tự làm quen với các bài tập và gửi đoạn code đầu tiên của bạn bằng cách hoàn thành bài đầu tiên "Hello, World!".
Luyện tập

    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 padding-left tương ứng. Hãy thử một ví dụ để hiểu cách thức hoạt động của nó:

Ví dụ

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 padding-left.

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

Ví dụ

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ùngbê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ụ:

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.

Ví dụ

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.

 

 

Một số bài viết liên quan
Devsne VN 9244 lượt xem

Sử dụng Width trong CSS: Bài 11 - Cập nhật mới.

Devsne VN 949 lượt xem

[CSS] Một số mẹo CSS mà có thể bạn chưa biết (Phần 1)

Devsne VN 7913 lượt xem

CSS3: Khái niệm về Kích thước Nội tại

Phương Thảo 482 lượt xem

Solar system with HTML, CSS

Devsne VN 5014 lượt xem

CSS Specificity là gì vậy?

Devsne VN 8931 lượt xem

Một số cách viết SCSS hay cần lưu ý khi code

Devsne VN 1186 lượt xem

CSS Tutorials: Introduction to CSS

Devsne VN 6557 lượt xem

Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 28)

Devsne VN 6448 lượt xem

[HTML + CSS + JS] Xây Dựng Thanh Điều Hướng Phụ Đơn Giản Với Tính Năng Lọc Nhanh Danh Sách Liên Kết

Devsne VN 8599 lượt xem

Tối ưu hoá phối hợp CSS và chữ để trang trí nội dung