CSS Padding căn chỉnh tuyệt vời

CSS Padding là gì?

Thuộc tính CSS Padding được sử dụng để căn lề khoảng không bên trong nội dung của thẻ hay phần tử. Bài hôm trước bạn đã học về CSS Margins – căn khoảng không bên ngoài của thẻ hay phần tử

Padding chính là khoảng không gian giữa nội dung và bên trong Border của phần tử hay thẻ. Với CSS bạn có thể hoàn toàn tuỳ chỉnh được khoảng không này với các vị trí: top, rigth, botton, left.

css-padding

Thuộc tính Padding – một phần của mặt

Bạn có thể dễ dàng Padding một mặt của phần tử:

  • padding-top
  • padding-right
  • padding-botton
  • padding-left

Tất cả các giá trị của thuộc tính Padding:

  • length: một giá trị đặc biệt như px, pt, cm, …
  • %: tỷ lệ % so với phần tử chứa nó
  • inherit: kế thừa từ phần tử chứa nó

Đây là ví dụ Padding cho thẻ <p>:

padding-css

Sử dụng Shorthand Code cho thuộc tính Padding

Để rút ngắn đoạn code bạn có thể sử dụng shorthand code các thuộc tính padding trên 1 dòng. Và nó tuân theo nguyên tắc thứ tự sau:

padding: w x y z;

Trong đó:

  • w: padding-top;
  • x: padding-right;
  • y: padding-botton;
  • z: padding-left;

padding-css1

Do vậy, đây là cấu trúc giá trị của thuộc tính Padding khi dùng Shorthand Code:

+) padding: 20px 30px 40px 50px; (4 giá trị)

  • padding-top: 20px;
  • padding-right: 30px;
  • padding-botton: 40px;
  • padding-left: 50px;

+) padding: 20px 30px 40px; (3 giá trị)

  • padding-top: 20px;
  • padding-right: 30px; padding-left: 30px;
  • padding-botton: 40px;

+) padding: 20px 30px; (2 giá trị)

  • padding-top: 20px; padding-botton: 20px;
  • padding-right: 30px; padding-left:30px;

+) padding: 20px; (1 giá trị)

  • padding-top, padding-right, padding-botton, padding-left: 20px;

Tóm lại, tổng kết Padding có các thuộc tính như sau:

  • padding: sử dụng shorthand code trên 1 dòng
  • padding-botton: cài đặt các giá trị cho phía dưới
  • padding-top: cài đặt các giá trị cho phía trên
  • padding-right: cài đặt các giá trị cho bên phải
  • padding-left: cài đặt các giá trị cho bên trái

Bài viết về Padding CSS này cực kỳ hay và quan trọng. Bạn sẽ sử dụng padding thường xuyên do vậy hãy học và thực hành kỹ nhé.

Tiếp theo hãy sang bài mới trong Seri tự học CSS tại nhà

Chúc bạn vui vẻ