Các thuộc tính CSS về margin
Các thuộc tính CSS về margin được sử dụng để tạo ra không gian xung quanh các phần tử.
Các thuộc tính margin thiết lập kích thước của vùng trắng bên ngoài đường viền.
Phần tử này có một margin trên (top) và margin dưới (bottom) là 50px.
CSS margin
Các thuộc tính CSS về margin thiết lập kích thước của vùng trắng bên ngoài đường viền.
Lưu ý: Margin (lề) là hoàn toàn trong suốt - và không thể có màu nền!
Với CSS, bạn điều khiển được toàn bộ về margin. Có các thuộc tính CSS để thiết lập margin cho mỗi phía của một phần tử (bên trên - top, bên phải - right, bên dưới cùng - bottom và bên trái - left).
Margin - Các phía độc lập
CSS có các thuộc tính để chỉ định margin cho mỗi phía (trên, phải, dưới, trái) của một phần tử:
· margin-top
· margin-right
· margin-bottom
· margin-left
Tất cả các thuộc tính margin có thể có giá trị như sau:
· auto - trình duyệt tự động tính toán margin
· giá trị là một con số - chỉ định margin theo px, pt, cm, v.v.
· % - chỉ định margin theo % chiều rộng\chiều cao của thành phần chứa (cha).
· inherit - xác định margin thừa hưởng từ các thành phần cha.
Lưu ý: Chúng ta cũng có thể sử dụng các giá trị âm cho margin; để chồng lấn nội dung.
Ví dụ sau thiết lập margin khác nhau cho tất cả bốn phía của phần tử <p>:
Ví dụ sau thiết lập margin khác nhau cho tất cả bốn phía của phần tử <p>:
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Ví dụ sau cho phép margin trái được thừa hưởng từ thành phần cha:
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
Margin - Thuộc tính rút gọn
Để giảm bớt mã, chúng ta có thể chỉ định tất cả các thuộc tính về margin bằng một thuộc tính.
Thuộc tính margin là thuộc tính rút gọn cho các thuộc tính về margin sau:
· margin-top
· margin-right
· margin-bottom
· margin-left
p{
margin: 100px 150px 100px 80px;
}
Sau đây là cách chúng sẽ làm việc:
Nếu thuộc tính margin có bốn giá trị:
· margin: 25px 50px 75px 100px;
o margin trên (top) là 25px
o margin phải (right) là 50px
o margin dưới (bottom) là 75px
o margin trái (left) 100px
Nếu thuộc tính margin có ba giá trị:
· margin: 25px 50px 75px;
o margin trên (top) là 25px
o margin phải (right) và trái (left) là 50px
o margin dưới (bottom) là 75px
Nếu thuộc tính margin có hai giá trị:
· margin: 25px 50px;
o margin trên (top) và dưới (bottom) là 25px
o margin phải (right) và trái (left) là 50px Nếu thuộc tính margin có một giá trị:
o margin: 25px;
o margin tất cả bốn phía (top, right, bottom, left) đều là 25px
Sử dụng giá trị tự động (auto)
Bạn có thể thiết lập thuộc tính margin với giá trị là auto để căn giữa phần tử theo chiều ngang với phần tử chứa nó.
Phần tử sẽ được chỉ định một chiều rộng cụ thể, và không gian còn lại sẽ được chia đều cho lề trái và lề phải:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Tự làm bài tập!
Exercise 1 » Exercise 2 » Exercise 3 »
Tất cả các thuộc tính CSS về margin
Tất cả các thuộc tính CSS về margin
Thuộc tính
|
Mô tả
|
Một thuộc
tính rút gọn để thiết lập các thuộc tính margin trong một mô tả (declaration)
|
|
Thiết lập margin dưới
(bottom) cho một phần tử
|
|
Thiết lập margin trái
(left) cho một phần tử
|
|
Thiết lập margin phải
(right) cho một phần tử
|
|
Thiết lập margin trên (top)
cho một phần tử
|
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét