CSS Margins

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-top
• margin-right
• margin-bottom
• margin-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-top
• margin-right
• margin-bottom
• margin-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;  }