[Học CSS] Bài 12: Làm việc với margin trong CSS

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng thuộc tính margin, một thuộc tính gần giống với padding và cũng được sử dụng rất thường xuyên.

Thuộc tính margin dùng để làm gì ?

Nếu như thuộc tính padding thiết lập khoảng cách giữa nội dung văn bản bên trong khung với viền khung  (border) thì margin sẽ thiết lập khoảng cách giữa 02 cái khung với nhau.

Các bạn có hình dung được không nhỉ ? nếu chưa hình dung ra thì xem hình ảnh này nhé !

Margin va padding trong CSS

Margin va padding trong CSS

Sử dụng margin trong CSS

Thì tương tự như đối với padding, để sử dụng thuộc tính margin các bạn dùng cú pháp:

  • margin: kích thước; (ví dụ margin: 10px;)
  • margin-left: kích thước; (ví dụ margin-left: 5px; khoảng cách đến phần tử bên trái là 5px ). Tương tự như vậy chúng ta có margin-right (cách bên phải), margin-top (trên), margin-bottom (dưới).

Ví dụ sau đây mình tạo 2 cái khung border chứa 2 đoạn văn bản, bên ngoài khung lại có một cái khung lớn bao hết 02 cái khung nhỏ. Để xem chúng như thế nào thì bạn copy vào Codepen mà xem nhé !

Các bạn thấy rằng giá trị margin sẽ giúp thiết lập khoảng cách từ viền khung đến tất cả các khung mà nó tiếp xúc, ở đây ví dụ chọn thằng khung số 02 có margin là 10px thì có nghĩa là khoảng cách giữa nó đến tất cả các khung mà nó tiếp xúc đều là 10px. Tương tự như vậy, các bạn thay giá trị khác vào để xem sự thay đổi nhé !

Lưu ý là trong ví dụ này, thằng khung số 01 nó đã margin xung quanh 30px nên khoảng cách giữa nó với thằng khung số 02 sẽ là 10px + 30px = 40px nhé !

Oke, bài này nội dung cũng khá đơn giản đúng không nào ? Mình nhắc lại là nó gần giống với padding nhưng margin thì nó áp dụng cho các phần tử bên ngoài khung, còn padding nó áp dụng cho phần tử bên trong khung. Padding hướng nội, margin hướng ngoại.

Bài học trước đó và tiếp theo

[Học CSS] Bài 12: Làm việc với margin trong CSS
Mời bạn oánh giá 😇
- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Tác giả tại Tịnh Nguyễn Blog
Bài viết bạn vừa xem được thực hiện bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là ác min của Hocban.vn. Đây là các bài viết của anh ấy !
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )