CSS Margins
Thuộc tính margin được sử dụng để tạo không gian xung quanh các element, bên ngoài bất kỳ border xác định nào.
Với CSS, bạn có toàn quyền kiểm soát margin. Có các thuộc tính để đặt margin cho mỗi bên của một element (trên cùng, phải, dưới cùng và bên trái).
Margin - Individual Sides
CSS có các thuộc tính để chỉ định margin cho mỗi bên của element:
margin-topmargin-rightmargin-bottommargin-left
Tất cả các thuộc tính margin có thể có các giá trị sau:
- auto - margin được trình duyệt tự động tính
- length - chỉ định chiều rộng margin bằng px, pt, cm, etc.
- % - chỉ định margin tính bằng % chiều rộng của element hiện tại
- inherit - chỉ định rằng margin phải được kế thừa từ element cha
Mẹo: Giá trị âm được phép.
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }Margin - Shorthand Property
Để rút ngắn code, có thể chỉ định tất cả các thuộc tính margin trong một thuộc tính.
Thuộc tính margin là thuộc tính viết tắt cho các thuộc tính margin riêng lẻ sau:
margin-topmargin-rightmargin-bottommargin-left
Vì vậy, đây là cách nó hoạt động:
Nếu thuộc tính margin có bốn giá trị:
- margin: 25px 50px 75px 100px;
- top margin: 25px
- right margin: 50px
- bottom margin: 75px
- left margin: 100px
p { margin: 25px 50px 75px 100px; }Nếu thuộc tính margin có ba giá trị:
- margin: 25px 50px 75px;
- top margin: 25px
- right và left margins: 50px
- bottom margin: 75px
p { margin: 25px 50px 75px; }Nếu thuộc tính margin có hai giá trị:
- margin: 25px 50px;
- top và bottom margins: 25px
- right và left margins: 50px
p { margin: 25px 50px; }Nếu thuộc tính margin có một giá trị:
- margin: 25px;
- tất cả bốn hướng margins: 25px
p { margin: 25px; }auto Value
Bạn có thể đặt thuộc margin thành auto để căn giữa element trong vùng chứa của nó theo chiều ngang.
Khi đó, element sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa lề trái và lề phải.
div { width: 300px; margin: auto; border: 1px solid red; }
inherit Value
Ví dụ này cho phép lề trái của element <p class = "ex1"> được kế thừa từ phần tử cha (<div>):
div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }
Margin Collapse
Lề trên và dưới của các element đôi khi được thu gọn thành một lề duy nhất bằng lề lớn nhất trong hai lề.
Điều này không xảy ra ở lề trái và lề phải! Chỉ lề trên và dưới!
Hãy xem ví dụ sau:
h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; }