Cách sử dụng Margin và Padding trong CSS

Margin: Margin(căn lề) cho một thành phần nào đó, thì nó sẽ tạo ra một khoảng cách giữa thành phần đó với các thành phần xung quanh nó (top, right, bottom và left). Tạo ra sự phân chia giữa các thành phần trong trang web được thể hiện rõ ràng hơn.

Các giá trị của margin:

– auto: tự động canh đều 2 bên left và right, thường được sử dụng để canh giữa màn hình cho toàn bộ trang web.

– Kích thước (pixels, pt, em . . .)

– % kích thước của thành phần chứa nó.

Ví dụ: bên dưới sẽ khai báo margin (top, right, left, bottom) cho thành phần <p> có class=”first”

– Trong file: bai1html.html ta có:

– Trong file: style.css ta gõ:

Kết quả:

cach su dung margin va padding trong css

Cach su dung margin va padding trong css

Padding: Padding là phần nằm giữa phần hiển thị nội dung và đường viền (border). Khi một thành phần được khai báo padding thì sẽ tạo ra một khoảng trống với dường viền giúp nội dung dễ nhìn hơn.

Các giá trị của padding

– Kích thước (pixels, pt, em . . .)

– % kích thước của thành phần chứa nó.

Ví dụ sau khai báo padding cho thành phần <p> có class=”two”

–         Trong file: bai1html.html ta có:

– Trong file: style.css ta gõ:

Kết quả:

Cach su dung margin padding trong CSS 2

Cach su dung margin padding trong CSS 2

Chúc các bạn thành công!