CSS Margins thuộc tính thường dùng nhất

CSS Margins là gì?

Thuộc tính CSS Margins (căn lề) được sử dụng để cấu hình khoảng không gian bao quanh các phần tử. Thuộc tính CSS Margins được dùng để cấu hình kích thước khoảng không bao quanh ngoài Border.

Với CSS bạn hoàn toàn có thể điều khiển khoảng không bên trên, phải, dưới và trái của các phần tử.

css-margins

Sử dụng Margin trên từng mặt riêng

Bạn có thể sử dụng các thuộc tính CSS Margin trên từng mặt riêng top, right, botton, left với cấu trúc như sau:

  • margin-top
  • margin-right
  • margin-botton
  • margin-left

Tất cả các thuộc tính của Margin đều có các giá trị như sau:

  • auto: trình duyệt sẽ tự tính toán margin (căn lề)
  • leght: một kích giá trị kích thước như: px, pt, cm, …
  • %: sử dụng căn lề margin với % của phần tử
  • inherit: giá trị được thừa hưởng từ phần tử cha

Chú ý: bạn có thể sử dụng được negative values (giá trị âm)

Ví dụ:

 

margin-css

Sử dụng thuộc tính Margin dùng Shorthand Code

Sử dụng Shorthand Code tối ưu các dòng Code Margin CSS trên một dòng, vô cùng tiện lợi và tiết kiệm.

Cấu trúc của thuộc tính Margin sử dụng Shorthand Code như sau:

margin: w x y z;

Trong đó:

  • w: margin-top
  • x: margin-right
  • y: margin-botton
  • z: margin-left

Ví dụ:

margin-css1

Và đây là cách hoạt động của Shorthand Code Margin:

+) margin: 20px 30px 40px 50px; ( 4 giá trị)

  • margin-top: 20px;
  • margin-right:30px;
  • margin-botton:40px;
  • margin-left:50px;

+) margin: 20px 30px 40px; (3 giá trị)

  • margin-top:20px;
  • margin-right: 30px; margin-left: 30px;
  • margin-botton:40px;

+) margin: 20px 30px; (2 giá trị)

  • margin-top: 20px; margin-botton: 20px;
  • margin-right: 30px; margin-left: 30px;

+) margin: 20px; (1 giá trị)

  • margin-top, margin-right, margin-botton, margin-left: 20px;

Giá trị Auto của Margin trong CSS

Bạn có thể sử dụng giá trị Auto cho thuộc tính Margin sẽ căn theo chiều ngang so với phần tử bao nó.

Ví dụ:

margin-css2

Giá trị thừa kế của Margin trong CSS

Một ví dụ về sự kế thừa căn trái từ phần tử cha

margin-css3

Tóm lại, tất cả các thuộc tính Margin CSS như sau:

  • margin: sử dụng shorthand code các giá trị trên 1 dòng
  • margin-botton: cài đặt các giá trị cho căn dưới
  • margin-righ: cài đặt các giá trị căn phải
  • margin-left: cài đặt các giá trị căn trái
  • margin-top: cài đặt các giá trị căn trên

Bài học về CSS Margin này vô cùng quan trọng trong quá trình làm web và phát triển web. Bạn nên học kỹ và thực hành kỹ trước khi tới bài viết tiếp theo trong Seri tự học CSS tại nhà.

Chúc bạn vui vẻ!