DANH MỤC: Box

Thuộc tính padding trong CSS


Cú Pháp

-Thuộc tính này có tác dụng thiết lập tất cả các thuộc tính padding (khoảng đệm) trên 1 lần khai báo.

Cú Pháp:

padding: length;

Trong đó: length có thể là một, hai, ba, bốn giá trị.

  • Khi padding chứa 1 giá trị, thì nó sẽ thiết lập khoảng đệm cho cả bốn phía.
  • Khi padding chứa 2 giá trị, thì tham số thứ nhất sẽ là khoảng đệm trên dưới và tham số thứ hai sẽ là khoảng đệp trái phải.
  • Khi padding chứa 3 giá trị, thì tham số thứ nhất sẽ là khoảng đệm trên, tham số thứ 2 là khoảng đệm trái phải, tham số thứ 3 là khoảng đệm dưới.
  • Khi padding chứa 4 giá trị, thì tham số thứ nhất sẽ là khoảng đệm trên, tham số thứ 2 là khoảng đệm phải, tham số thứ 3 là khoảng đệm dưới, tham số thứ 4 là khoảng đệm trái.

Ví Dụ

VD1: Khi padding chứa 1 giá trị.

p{
    background-color: orange;
    width: 200px;
    padding: 10px;
}

VD2: Khi padding chứa 2 giá trị.

p{
    background-color: orange;
    width: 200px;
    padding: 10px 20px;
}

VD3: Khi padding chứa 3 giá trị.

p{
    background-color: orange;
    width: 200px;
    padding: 10px 20px 30px;
}

VD4: Khi padding chứa 4 giá trị.

p{
    background-color: orange;
    width: 200px;
    padding: 10px 20px 30px 50px;
}

 

Nguồn: Toidicode.com

Thông tin tác giả

Thanh Tai (thanhtaivtt)

Thanh Tai (thanhtaivtt)

The best way to learn is to teach

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia