Căn lề trong CSS Để xác định phần không gian xung quanh các phần tử, bạn sử dụng thuộc tính margintrong CSS.. Để căn lề cho một phần tử, bạn có các thuộc tính sau: • Thuộc tính margin: s
Trang 1Căn lề trong CSS
Để xác định phần không gian xung quanh các phần tử, bạn sử dụng thuộc
tính margintrong 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
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:
• Thuộc tính margin: sử dụng thuộc tính này bạn có thể thiết lập tất cả style liên quan
tới việc căn lề chỉ trong một khai báo CSS
• Thuộc tính margin-bottom căn lề dưới của một phần tử
• Thuộc tính margin-top căn lề trên của một phần tử
• Thuộc tính margin-left căn lề trái của một phần tử
• Thuộc tính margin-right căn lề phải của một phần tử
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:
• auto: Trình duyệt tự động ước lượng việc căn lề cho phần tử
• length: Xác định độ rộng (đơn vị px, pt, cm, …) của lề Giá trị mặc định là 0
• %: Xác định mối quan hệ giữa lề với độ rộng của phần tử chứa lề
• inherit: Kế thừa thuộc tính này từ phần tử cha chứa phần tử có thuộc tính margin
này
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
Trang 2Thuộc tính margin trong CSS
Sử 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;
• Lề trên là 25px
• Lề phải là 50px
• Lề dưới là 75px
• Lề trái là 100px
Nếu thuộc tính margin có 3 giá trị:
margin: 25px 50px 75px;
• Lề trên là 25px
• Lề phải và trái là 50px
• Lề dưới là 75px
Nếu thuộc tính margin có 2 giá trị:
margin: 25px 50px;
• Lề trên và lề dưới là 25px
• Lề phải và lề trái là 50px
Nếu thuộc tính margin có 1 giá trị:
Trang 3margin: 25px;
• Các lề trên, lề dưới, lề trái, và lề phải là 25px
Ví dụ
<html> <head> </head> <body> <p style = margin: 15px ;
border: 1px solid black; > Ca 4 le: tren, duoi, trai va phai deu co do
rong le la 15px </p> <p style = margin: 10px %; border: 1px
solid black; > Le tren va le duoi la 10px Do rong cua le trai va le phai bang 2% tong do rong cua trang </p> <p style = margin: 10px
2 10px ; border: 1px solid black; > Le tren la 10px Do rong cua le trai
va le phai bang 2% tong do rong cua trang Le duoi la -10px </p>
<p style = margin: 10px % - 10px auto ; border: 1px solid black; > Le tren
la 10px Do rong cua le phai bang 2% tong do rong cua trang Le duoi la -10px,
va le trai se duoc thiet lap tu dong boi trinh duyet </p> </body>
</html>
Đây là kết quả
Ca 4 le: tren, duoi, trai va phai deu co do rong le la 15px
Le tren va le duoi la 10px Do rong cua le trai va le phai bang 2% tong do
rong cua trang
Le tren la 10px Do rong cua le trai va le phai bang 2% tong do rong cua
trang Le duoi la -10px
Le tren la 10px Do rong cua le phai bang 2% tong do rong cua trang Le duoi
la -10px, va le trai se duoc thiet lap tu dong boi trinh duyet
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> </head> <body> <p style = margin-bottom: 15px ;
border: 1px solid black; > Doan van nay co Le duoi duoc xac dinh cu the
bang gia tri do rong la 15 pixel </p> <p style =
margin-bottom: 5 %; border: 1px solid black; > Doan van nay co Le duoi duoc xac
dinh cu the bang gia tri do rong la 5% </p> </body> </html>
Kết quả là:
Trang 4Doan van nay co Le duoi duoc xac dinh cu the bang gia tri do rong la 15 pixel Doan van nay co Le duoi duoc xac dinh cu the bang gia tri do rong la 5%
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> </head> <body> <p style = margin-top: 15px ;
border: 1px solid black; > Doan van nay co Le tren duoc xac dinh cu the bang gia tri do rong la 15 pixel </p> <p style = margin-top: 5 %; border: 1px solid black; > Doan van nay co Le tren duoc xac dinh
cu the bang gia tri do rong la 5% </p> </body> </html>
Kết quả là:
Doan van nay co Le tren duoc xac dinh cu the bang gia tri do rong la 15 pixel Doan van nay co Le tren duoc xac dinh cu the bang gia tri do rong la 5%
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> </head> <body> <p style = margin-left: 15px ;
border: 1px solid black; > Doan van nay co Le trai duoc xac dinh cu the bang gia tri do rong la 15 pixel </p> <p style = margin-left:
5 %; border: 1px solid black; > Doan van nay co Le trai duoc xac dinh cu the bang gia tri do rong la 5% </p> </body> </html>
Kết quả là:
Doan van nay co Le trai duoc xac dinh cu the bang gia tri do rong la 15 pixel
Trang 5Doan van nay co Le trai duoc xac dinh cu the bang gia tri do rong la 5%
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> </head> <body> <p style = margin-right: 15px ;
border: 1px solid black; > Doan van nay co Le phai duoc xac dinh cu the bang gia tri do rong la 15 pixel </p> <p style = margin-right: 5 %; border: 1px solid black; > Doan van nay co Le phai duoc xac dinh cu the bang gia tri do rong la 5% </p> </body> </html>
Kết quả là:
Doan van nay co Le phai duoc xac dinh cu the bang gia tri do rong la 15
pixel
Doan van nay co Le phai duoc xac dinh cu the bang gia tri do rong la 5%