Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
  • Trang chủ
  • Học CSS
  • [Tự học CSS] – Tìm hiểu về cách căn lề cho phần tử bằng thuộc tính margin trong CSS
751 lượt xem

[Tự học CSS] – Tìm hiểu về cách căn lề cho phần tử bằng thuộc tính margin trong CSS

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Bài viết lần này mình sẽ hướng dẫn cho các bạn cách để căn lề cho phần tử bằng thuộc tính margin

Thuộc Tính Margin Dùng Để Canh Lề Cho Phần Tử.

Dưới đây là một số thuộc tính margin:

  • margin-top (canh lề phía trên)
  • margin-right (canh lề bên phải)
  • margin-bottom (canh lề phía dưới)
  • margin-left (canh lề bên trái)

Ví dụ minh họa :

Lưu ý: Giá trị của thuộc tính margin có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó), auto (trình duyệt tự động thiết lập giá trị)

Ví dụ :

Cú Pháp Canh Lề Rút Gọn

Thay vì phải canh lề bởi bốn thuộc tính (margin-top, margin-right, margin-bottom, margin-left) riêng biệt, thì ta có thể gôm chúng lại thành một. Với cách này, ta có bốn cú pháp như sau:

  • Cả bốn vị trí đều có cùng giá trị value
  • margin-top & margin-bottom có giá trị value1
  • margin-right & margin-left có giá trị value2
  • margin-top có giá trị value1
  • margin-right & margin-left có giá trị value2
  • margin-bottom có giá trị value3
  • margin-top có giá trị value1
  • margin-right có giá trị value2
  • margin-bottom có giá trị value3
  • margin-left có giá trị value4

Ví dụ :

Lời Kết

Bài viết tới đây là kết thúc rồi, cảm ơn các bạn đã theo dõi bài viết. Nếu có bất kỳ thắc mắc hay câu hỏi nào hãy bình luận dưới bài viết, mình sẽ giúp đỡ các bạn giải đáp thắc mắc.

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Bình luận Facebook

2 bình luận trong “[Tự học CSS] – Tìm hiểu về cách căn lề cho phần tử bằng thuộc tính margin trong CSS

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook