[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 : ...
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <title>Ví dụ về margin</title> <meta charset="utf-8"> </head> <style type="text/css"> .margin{ awidth: 600px; height: 50px; border: 1px solid red; font-size: 30px; margin-top:100px; margin-left: 100px; } </style> <body> <div class="margin">Chào mừng bạn đến với Laptrinhphp.com.vn</div> </body> |
Kết quả :
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ụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <title>Ví dụ về padding</title> <meta charset="utf-8"> </head> <style type="text/css"> .margin{ awidth: 600px; height: 200px; border: 1px solid red; font-size: 30px; padding-top: 50px; padding-left: 50px; } </style> <body> <div class="margin">Chào mừng bạn đến với Laptrinhphp.com.vn</div> </body> |
Kết quả :
Để 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.!!!
