[BÀI 8]Thuộc tính padding và margin trong css

Thuộc tính padding và margin trong CSS

Padding và margin là 2 thuộc tính trong css giúp căn chỉnh các thành phần của website vào vị trí mà mình mong muốn.

1. Margin

Dùng để tạo khoảng cách với các thành phần bên ngoài thẻ HTML.

Các giá trị có thể là px, em, %…..

Margin-top : Canh khoảng cách bên trên cho thành phần.

Ví dụ : margin-top : 30px;

Margin-right : Canh khoảng cách bên phải cho thành phần.

Ví dụ : margin-right : 3em;

Margin-left : Canh khoảng cách bên trái cho thành phần.

Ví dụ : margin-left  : 50%;

Margin-bottom : Canh khoảng cách bên dưới cho thành phần.

Ví dụ : margin-bottom : 30px;

Margin : Là cách viết ngắn gọn cho các thuộc tính trên. Sau margin là các thành phần.

+ Nếu là 1 giá trị thì nó sẽ thể hiện cho cả top, right, bottom, left.

+ Nếu là 2 giá trị thì giá trị đầu thể hiện cho top và bottom, giá trị sau thể hiện cho left và right.

+ Nếu là 3 giá trị thì giá trị đầu thể hiện cho top, giá trị thứ 2 thể hiện cho right và left, giá trị thứ 3 thể hiện cho bottom.

+ Nếu là 4 giá trị thì nó lần lượt thể hiện cho top, right, bottom, left.

Ví dụ cho margin :

Kết quả :

margin

2. Padding

Dùng để tạo khoảng cách với các thành phần bên trong thẻ HTML.

Padding-top : Thêm vào khoảng không bên trên cho thành phần.

Ví dụ : padding-top : 20px;

Padding -right : Thêm vào khoảng không bên phải cho thành phần.

Ví dụ : padding-right : 4em;

Padding -left : Thêm vào khoảng không bên trái cho thành phần.

Ví dụ : padding-left  : 25%;

Padding -bottom : Thêm vào khoảng không bên dưới cho thành phần.

Ví dụ : padding-bottom : 30px;

Padding : Là cách viết ngắn gọn cho các thuộc tính trên. Sau padding là các giá trị.

+ Nếu là 1 giá trị thì nó sẽ thể hiện cho cả top, right, bottom, left.

+ Nếu là 2 giá trị thì giá trị đầu thể hiện cho top và bottom, giá trị sau thể hiện cho left và right.

+ Nếu là 3 giá trị thì giá trị đầu thể hiện cho top, giá trị thứ 2 thể hiện cho right và left, giá trị thứ 3 thể hiện cho bottom.

+ Nếu là 4 giá trị thì nó lần lượt thể hiện cho top, right, bottom, left.

Ví dụ :

Kết quả :

padding

Để tìm hiểu chi tiết hơn, các bạn có thể tham khảo các khóa học tại đây.!!!