CSS Margin

14/05/2019

Bài sau » « Bài trước

Thuộc tính margin trong CSS dùng để chỉ định khoảng cách giữa các phần tử HTML, khoảng cách bên ngoài từ đối tượng này đến đối tượng kia. Không làm gia tăng width, height của phần tử HTML.

Thuộc tính margin của một phần tử có 4 giá trị tương ứng trên, phải, dưới và trái. 

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Thuộc tính margin có thể có các giá trị sau:

  • auto - Trình duyệt sẽ tính toán margin
  • length - Giá trị margin cụ thể kèm đơn vị px, pt, em, rem,...
  • % - Chỉ định margin theo % width của phần tử chứa nó.
  • inherit - Chỉ định margin được thừa kế theo phần tử cha.

Chú ý: Giá trị âm vẫn được chấp nhận.

p{ margin-top: 50px; margin-right: 30px; margin-bottom: 20px; margin-left: 20px; }

Kết quả hiển thị :

Ví dụ về margin của thẻ p theo top là 50px, right là 30px, bottom là 20px và left là 20px

Margin - Cú pháp rút gọn

Theo ví dụ phía trên, thay vì ta viết các thuộc tính margin riêng lẻ cho từng lề (top, right, bottom, left) thì ta có thể viết ngắn gọn lại trong 1 dòng code với thuộc tính margin. Cú pháp :

margin: margin-top margin-right margin-bottom margin-left;

- Nếu thuộc tính margin có 4 giá trị:

margin: 50px 30px 30px 20px;

Có nghĩa là :
margin-top là 50px
margin-right là 30px
margin-bottom là 30px
margin-left là 20px

- Nếu thuộc tính margin có 3 giá trị:

margin: 50px 30px 30px;

Có nghĩa là :
margin-top là 50px
margin-right và margin-left là 30px
margin-bottom là 30px

- Nếu thuộc tính margin có 2 giá trị:

margin: 50px 30px;

Có nghĩa là :
margin-top và margin-bottom là 50px
margin-right và margin-left là 30px

- Nếu thuộc tính margin có 1giá trị:

margin: 50px;

Có nghĩa là :
Tất cả các lề đều 50px

Giá trị auto

Bạn có thể cho giá trị auto cho thuộc tính margin để căn giữa theo chiều ngang (horizontal) của một phần tử trong div chứa nó.

Phần tử phải được set width cố định và phần khoảng trống còn lại giữa lề trái và phải được trình duyệt chia đều. Xem ví dụ bên dưới :

p{ width: 300px; margin: auto; border: 1px solid blue; }

Test margin auto

Giá trị inherit

Ví dụ về giá trị inherit của margin. Ta có div cha margin-left là 30px và thẻ p nằm trong có margin kế thừa từ cha.

div{ border: 1px solid red; margin-left: 30px; margin-top: 20px; } div p{ margin: inherit; border: 1px solid blue; }

Margin phần tử con thừa kế từ phần tử cha.

Margin collapse - Margin chồng nhau

Khi 2 phần tử HTML gần nhau có margin top và bottom chồng lên nhau thì nó sẽ lấy giá trị margin lớn nhất. Điều này không xảy ra đối với margin left và right. Ví dụ:

div.top{ border: 1px solid red; margin-bottom: 40px; } p.bottom{ margin-top: 20px; border: 1px solid blue; }

Div html ở trên. Có margin bottom là 40px lớn hơn 20px margin top của thẻ p ở dưới, nên khoảng cách giữa div và p là 40px.

Thẻ p ở dưới. Có margin top 20px. Nhưng nó không cộng dồn với thẻ div ở trên thành 60px (40px + 20px), mà chỉ lấy giá trị margin lớn hơn của div ở trên là 40px.

Bài hướng dẫn về CSS Margin đã kết thúc rồi. Kiến thức về margin khá quan trọng nên nếu các bạn chưa hiểu thì nên xem lại nhiều lần và thực hành nó kỹ hơn.

Bài sau » « Bài trước
Back to top