NTM Solutions

Thứ Hai, 2 tháng 4, 2018

Tự 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:

Nguồn : Lớp học vi tính .COM