CSS Padding

CSS Padding

Các thuộc tính padding được sử dụng để tạo không gian xung quanh nội dung của một element bên trong bất kỳ border được xác định nào.

Với CSS, bạn có toàn quyền kiểm soát padding. Có các thuộc tính để đặt padding cho mỗi bên của một element (trên cùng, phải, dưới cùng và bên trái).

Padding - Individual Sides

CSS có các thuộc tính để chỉ định padding cho mỗi bên của phần tử:

• padding-top
• padding-right
• padding-bottom
• padding-left

Tất cả các thuộc tính padding có thể có các giá trị sau:

• auto - margin được trình duyệt tự động tính
• length - chỉ định chiều rộng margin bằng px, pt, cm, etc.
• % - chỉ định margin tính bằng % chiều rộng của element hiện tại
• inherit - chỉ định rằng margin phải được kế thừa từ element cha

Lưu ý: Giá trị âm không được phép.

div {    padding-top: 50px;    padding-right: 30px;    padding-bottom: 50px;    padding-left: 80px;  }

 

Padding - Shorthand Property

Để rút ngắn code, có thể chỉ định tất cả các thuộc tính padding trong một thuộc tính.

Thuộc tính padding là một thuộc tính viết tắt cho các thuộc tính padding riêng lẻ sau:

• padding-top
• padding-right
• padding-bottom
• padding-left

Vì vậy, đây là cách nó hoạt động:

Nếu thuộc tính padding có bốn giá trị:

• padding: 25px 50px 75px 100px;
  • top padding: 25px
  • right padding: 50px
  • bottom padding: 75px
  • left padding: 100px

div {    padding: 25px 50px 75px 100px;  }

Nếu thuộc tính padding có ba giá trị:

• padding: 25px 50px 75px;
  • top padding: 25px
  • right và left paddings: 50px
  • bottom padding: 75px

div {    padding: 25px 50px 75px;  }

Nếu thuộc tính padding có hai giá trị:

• padding: 25px 50px;
  • top and bottom paddings are 25px
  • right and left paddings are 50px

div {    padding: 25px 50px;  }

Nếu thuộc tính padding có một giá trị:

• padding: 25px;
  • tất cả 4 hướng paddings: 25px

div {    padding: 25px;  }

 

Padding và Element Width

Thuộc tính width CSS chỉ định chiều rộng của vùng content của element. Vùng content là phần bên trong padding border và margin của một element.

Vì vậy, nếu một element có width được chỉ định, padding được thêm vào element đó sẽ được thêm vào tổng width của element. Đây thường là một kết quả không mong muốn.

div {    width: 300px;    padding: 25px;  }

Để giữ width ở 300px, bất kể số lượng padding, bạn có thể sử dụng thuộc tính box-sizing. Điều này làm cho element duy trì width thực của nó; nếu bạn tăng padding, không gian content có sẵn sẽ giảm.

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