Để xác định phần không gian xung quanh các phần tử, bạn sử dụng thuộc tính margin trong CSS. Thuộc tính margin thiết lâp kích cỡ của phần khoảng trống BÊN NGOÀI đường viền. Với margin, bạn cũng có thể xác định một giá trị âm cho thuộc tính này để tạo các phần nội dung gối lên nhau. Show Giá trị của thuộc tính margin không được kế thừa bởi các phần tử con. Bạn hãy nhớ rằng các lề dọc lân cận (các lề trên và lề dưới) sẽ kết hợp thành một lề. Để căn lề cho một phần tử, bạn có các thuộc tính sau:
Tất cả các thuộc tính liên quan tới Margin trên đều có thể nhận các giá trị sau:
Phần tiếp theo sẽ trình bày chi tiết cách sử dụng các thuộc tính này trong CSS. Nội dung chính
Thuộc tính margin trong CSSSử dụng thuộc tính margin, bạn có thể xác định tất cả Style Rule liên quan tới việc căn lề trong CSS. Với margin, bạn viết ít code hơn mà vẫn có thể tạo tất cả style cho lề. Thuộc tính này có cú pháp giống như sau: p { margin: 100px 150px 100px 80px; } Bạn theo dõi các ví dụ sau và theo dõi cách nó hoạt động: Nếu thuộc tính margin có 4 giá trị: margin: 25px 50px 75px 100px;
Nếu thuộc tính margin có 3 giá trị: margin: 25px 50px 75px;
Nếu thuộc tính margin có 2 giá trị: margin: 25px 50px;
Nếu thuộc tính margin có 1 giá trị: margin: 25px;
Ví dụ: <html> <head> <meta charset="UTF-8"> </head> <body> <p style="margin: 15px; border:1px solid black;"> Cả 4 lề: trên, dưới, trái và phải đều có độ rộng là 15px </p> <p style="margin:10px 2%; border:1px solid black;"> Lề trên và lề dưới là 10px. Lề trái và lề phải bằng 2% tổng độ rộng của trang. </p> <p style="margin: 10px 2% -10px; border:1px solid black;"> Lề trên là 10px. Độ rộng của lề trái và lề phải bằng 2% tổng độ rộng của trang. Lề dưới là -10px. </p> <p style="margin: 10px 2% -10px auto; border:1px solid black;"> Lề trên là 10px. Độ rộng của lề phải bằng 2% tổng độ rộng của trang. Lề dưới là -10px. Và lề trái sẽ được thiết lập tự động bởi trình duyệt. </p> </body> </html> Kết quả: Thuộc tính margin-bottom trong CSSĐể căn lề dưới cho một phần tử, bạn sử dụng thuộc tính margin-bottom trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto. Ví dụ sau minh họa cách sử dụng thuộc tính margin-bottom trong CSS: <html> <head> <meta charset="UTF-8"> </head> <body> <p style="margin-bottom: 15px; border:1px solid black;"> Đoạn văn này có lề dưới bằng giá trị độ rộng là 15px. </p> <p style="margin-bottom: 5%; border:1px solid black;"> Đoạn văn này có lề dưới bằng giá trị độ rộng là 5%. </p> </body> </html> Kết quả: Thuộc tính margin-top trong CSSĐể căn lề trên cho một phần tử, bạn sử dụng thuộc tính margin-top trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto. Ví dụ sau minh họa cách sử dụng thuộc tính margin-top trong CSS: <html> <head> <meta charset="UTF-8"> </head> <body> <p style="margin-top: 15px; border:1px solid black;"> Đoạn văn này có lề trên bằng giá trị độ rộng là 15px. </p> <p style="margin-top: 5%; border:1px solid black;"> Đoạn văn này có lề trên bằng giá trị độ rộng là 5%. </p> </body> </html> Kết quả: Thuộc tính margin-left trong CSSĐể căn lề trái cho một phần tử, bạn sử dụng thuộc tính margin-left trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto. Ví dụ sau minh họa cách sử dụng thuộc tính margin-left trong CSS: <html> <head> <meta charset="UTF-8"> </head> <body> <p style="margin-left: 15px; border:1px solid black;"> Đoạn văn này có lề trái bằng giá trị độ rộng là 15px. </p> <p style="margin-left: 5%; border:1px solid black;"> Đoạn văn này có lề trái bằng giá trị độ rộng là 5%. </p> </body> </html> Kết quả: Thuộc tính margin-right trong CSSĐể căn lề phải cho một phần tử, bạn sử dụng thuộc tính margin-right trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto. Ví dụ sau minh họa cách sử dụng thuộc tính margin-right trong CSS: <html> <head> <meta charset="UTF-8"> </head> <body> <p style="margin-right: 15px; border:1px solid black;"> Đoạn văn này có lề phải bằng giá trị độ rộng là 15px. </p> <p style="margin-right: 5%; border:1px solid black;"> Đoạn văn này có lề phải bằng giá trị độ rộng là 5%. </p> </body> </html> Kết quả: |