Khóa học CSS - Bài 06 - Canh lề trong PADDING

Quay về mục lục TỰ HỌC CSS

Padding là khoảng cách xung quanh nội dung của đối tượng HTML, tính từ đường viền vào trong.

Cũng như margin, thuộc tính padding có 04 hướng: top-right-bottom-left.

1. Các hướng

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

Thuộc tính padding có thể có các loại giá trị sau:

· Khoảng cách: tính bằng pixel

· % của đối tượng chứa nó

· Inherit: thừa hưởng thuộc tính của đối tượng chứa nó

Ghi chú: không chấp nhận giá trị âm trong thuộc tính padding.

Ví dụ:

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

    border: 2px solid green;
}

padding-top và padding-bottom để canh giữa nội dung theo chiều dọc.

2. Viết tắt

a.       Trường hợp 04 giá trị

Top-right-bottom-left

b.      Trường hợp 03 giá trị

                                                   i.      Top

                                                 ii.      Left-right

                                                iii.      bottom

c.       Trường hợp 02 giá trị

                                                   i.      Top-bottom

                                                 ii.      Right-left

d.      Trường hợp 01 giá trị

Cả 04 hướng đều được gán 01 giá trị.

Ví dụ:

div.chung04 {padding: 80px 20px 30px 50px;}

div.chung03 {padding: 20px 30px 50px;}

div.chung02 {padding: 80px 20px;}

div.chung01 {padding: 80px;}

div {border: 2px solid green;}

Và các thẻ HTML trong phần body:

<div class="chung01">Padding 01 giá trị</div>

<div class="chung02">Padding 02 giá trị</div>

<div class="chung03">Padding 03 giá trị</div>

<div class="chung04">Padding 04 giá trị</div>

3. Padding và width

Nếu 01 phần tử có cả 02 thuộc tính width và padding, bề rộng thực sự của phần tử HTML sẽ là tổng của padding + width

Ví dụ:

div{

padding: 80px;

width: 150px;

border: 2px solid green;

        }

       
Sau đó các bạn thử bỏ giá trị padding đi sẽ thấy bề rộng khối div bị thu hẹp lại còn 150px.

Để giữ nguyên kích thước giá trị width bất chấp padding bằng bao nhiêu, ta thêm thuộc tính:

box-sizing: border-box;

Để hiểu thêm về vị trí các đối tượng trong trang web các  bạn xem thêm bài 08 – Mô hình hộp

Nếu vẫn chưa hiểu các bạn xem thêm video clip sau:

Quay về mục lục TỰ HỌC CSS

Tác giả: #drM

Nguồn : Sưu Tầm