CSS 13 – Thuộc tính căn lề Margin trong CSS

0
130
Xin chào các bạn, bài trước mình đã hướng dẫn các bạn cách sử dụng thuộc tính tạo đường viền Border trong CSS rồi, và bài tiếp theo hôm nay, chúng ta sẽ cùng tìm hiểu về thuộc tính căn lề Margin trong CSS.

Định nghĩa

Trong một trang web đôi lúc chúng ta thấy có những khoảng trống giữa các khối với nhau, nhưng mà họ lại không sử dụng tag <br>,… Những khoảng trống đó được tạo bằng CSS và cụ thể là sử dụng thuộc tính margin trong CSS. Thuộc tính margin là thuộc tính khi sử dụng sẽ thêm khoảng không gian bên ngoài của thành phần. Nói dễ hiểu thì margin sẽ giúp tạo khoảng cách giữa các thành phần HTML với nhau.
Thuộc tính căn lề Margin trong CSS
Thuộc tính margin được chia làm 2 dạng sử dụng:
  • Dạng cơ bản gồm 4 thuộc tính là: margin-top, margin-right, margin-bottom và margin-left.
  • Dạng tổng quát (viết tắt) gồm 4 thuộc tính:
    • margin với 4 giá trị.
    • margin với 3 giá trị.
    • margin với 2 giá trị.
    • margin với 1 giá trị.

Cấu trúc sử dụng dạng cơ bản

Bảng dưới đây sẽ liệt kê các giá trị bạn có thể sử dụng:
Thuộc tính Giá trị Mô tả
margin đơn vị auto inherit Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, …
margin-top đơn vị auto inherit Canh lề bên trên cho thành phần, đơn vị có thể là px, em, %, …
margin-right đơn vị auto inherit Canh lề bên phải cho thành phần, đơn vị có thể là px, em, %, …
margin-bottom đơn vị auto inherit Canh lề bên dưới cho thành phần, đơn vị có thể là px, em, %, …
margin-left đơn vị auto inherit Canh lề bên trái cho thành phần, đơn vị có thể là px, em, %, …

Các cách viết tắt thuộc tính margin

Chúng ta có cách sử dụng các giá trị trong thuộc tính margin viết tắt như sau:

Cách viết 4 thành phần

Cách viết này sử dụng khi 4 giá trị top, right, bottom và left khác nhau. Cú pháp: Ví dụ: Dòng margin ở trên tương đương với các giá trị sau:
  • margin-top: 5px;
  • margin-right: 10px
  • margin-bottom: 3px
  • margin-left: 20px

Cách viết 3 thành phần

Cách viết này sử dụng khi 2 giá trị right và left bằng nhau, còn 2 giá trị top và bottom khác nhau và khác cả giá trị left, right. Cấu trúc:

Cách viết 2 thành phần

Cách viết này sử dụng khi 2 giá trị right và left bằng nhau, còn 2 giá trị top và bottom bằng nhau. Cấu trúc:

Cách viết 1 thành phần

Cách viết này sử dụng khi cả 4 giá trị top, right, bottom và left đều bằng nhau. Cấu trúc:

Ví dụ tổng quát

Bước 1: Tạo file HTML và CSS nằm ngang hàng nhau. File margin.html với nội dung: File style.css có nội dung như sau: Hiển thị khi chưa sử dụng thuộc tính margin như sau:
Bước 2: Sử dụng thuộc tính margin
Ví dụ trên đây sử dụng cách viết tắt 4 giá trị margin: 10px 30px 20px 50px; Bạn có thể viết tương đương đầy đủ như sau: Lưu ý:
  • Các bạn có thể áp dụng thuộc tính margin để tạo khoảng cách giữa các thành phần với nhau.
  • Với margin, bạn cũng có thể xác định một giá trị âm cho thuộc tính này để tạo các phần nội dung đi ngược thứ tự hiển thị thành phần.
  • Khi sử dụng thuộc tính margin thì sẽ không ảnh hưởng tới chiều rộng của đối tượng HTML, nghĩa là nếu bạn thiết lập chiều rộng width:100px và margin:20px thì lúc chiều rộng của đói tượng so  với lề là 100px + 20px = 120px. Nghĩa lả chiều rộng width:100px sẽ không thay đổi.

Kết luận

Như vậy, bài hôm nay mình đã hướng dẫn cho các bạn xong thuộc tính Margin căn lề trong CSS. Đây là một thuộc tính rất quan trọng giúp các bạn tạo khoảng cách giữa các thành phần trong website. Chúc các bạn học tập tốt!  

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây