[Học CSS] Bài 11: Làm việc với padding trong CSS

Trong bài này chúng ta sẽ tìm hiểu về thuộc tính padding trong CSS, để xem nó được sử dụng như thế nào nhé !

Thuộc tính padding có chức năng gì ?

Như trong bài trước, chúng ta tạo được cái khung viền bao quanh văn bản nhưng mà khoảng cách từ vị trí của viền đến phần nội dung văn bản nó quá ngắn hay nói cách khác là nó sát quá.

Vậy để điều chỉnh khoảng cách giữa nội dung văn bản và đường viền thì chúng ta sẽ sử dụng thuộc tính padding. Các bạn lưu ý là nó sẽ áp dụng chỉ bên trong khung border bao quanh nó thôi nhé.

Sử dụng thuộc tính padding trong CSS

Để dụng thuộc tính padding thì chúng ta sử dụng cú pháp như sau:

Giá trị ở đây có thể là px, em, @, … nói chung là các đơn vị kích thước mà chúng ta đã tìm hiểu rồi đó.

Sử dụng lại ví dụ ở bài trước và thêm vào thộc tính padding này, chúng ta sẽ nhận ra sự khác biệt như sau, ở đây mình cho khoảng cách từ viền đến nội dung là 30px :

Nếu sử dụng thuộc tính padding thì nó áp dụng đều cho 4 cạnh của border xung quanh nó, nhưng chúng ta cũng có thể tùy chỉnh khoảng cách cho các cạnh khác nhau như sau:

  • padding-top: khoảng cách đến cạnh trên;
  • padding-bottom: khoảng cách đến cạnh dưới;
  • padding-right: khoảng cách đến cạnh phải;
  • padding-left: khoảng cách đến cạnh trái;

Các bạn tham khảo ví dụ sau là sẽ hình dung được.

Còn nếu bạn muốn thêm mỗi cạnh của boder có một thuộc tính khác nhau, khoảng cách khác nhau thì làm tương tự ví dụ này:

Thì bài này nội dung bao nhiêu đây thôi, cũng khá là đơn giản đúng không nào ? Mình nhắc lại là padding nó được áp dụng cho phần tử nằm bên trong boder thôi nhé, tức là nó định vị vị trí từ mép viền của border trở vào trong thôi.

Bài học trước đó và tiếp theo

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )