CSS Spacing

CSS spacing dùng để chỉ các thuộc tính giúp tăng khoảng cách của các thành phần trong phần tử hoặc giữa các phần tử với nhau

CSS Margin

Margin dùng để tạo một khoảng cách bao xung quanh phần tử tính từ border, hiểu đơn giản margin là khoảng cách lề của phần tử

Margin sử dụng tất cả các giá trị có đơn vị hợp lệ

Cú pháp

Với CSS chúng ta có thể cấu hình margin cho từng cạnh hoặc có thể tuỳ chỉnh tất cả cùng lúc bằng cú pháp shorthand

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

# shorthand
margin: all-side-value; 
margin: top-bottom right-left;
margin: top left-right bottom;
margin: top right bottom left;

Ví dụ

Margin: auto

Khi sử dụng margin: auto; phần tử sẽ tự động canh giữa phần tử container chứa nó theo chiều ngang.

Khoảng cách sẽ chia đều bên trái và bên phải của phần tử

margin: auto;

Margin: inherit

Khi gán giá trị margin: inherit phần tử sẽ thừa hưởng giá trị margin từ thẻ cha của mình.

Trong ví dụ này class ex1 có margin-left 100px giống với thẻ div(thẻ cha của ex1)

Margin Collapse

Khi 2 phần tử kế nhau đều có khai báo margin của mình và 2 khai báo này đè lên nhau thì đôi khi sẽ có trường hợp 2 phần tử này sẽ cách nhau với khoảng cách đúng bằng khoảng cách margin của phần tử có margin khai báo lớn hơn.

Trường hợp này chỉ xảy ra cho trường hợp top-bottom chứ không có left-right

Ở đây chúng ta thấy h1 có margin-bottom: 50px còn h2 có margin-top: 20px. Lúc này cả 2 sẽ cách nhau 1 khoảng bằng 50px(phần màu vàng) chứ không phải bằng 70px hoặc bằng 20px ==> trường hợp này chính là Margin collapse.

CSS Padding

Padding dùng để tạo 1 khoảng cách nằm giữa nội dung và border của phần tử. Nói cách khác padding chính là khoảng cách biên của phần tử.

Padding sử dụng tất cả các giá trị có đơn vị hợp lệ

Cú pháp

Với CSS chúng ta có thể cấu hình padding cho từng cạnh hoặc có thể tuỳ chỉnh tất cả cùng lúc bằng cú pháp shorthand

padding-top: value;
padding-bottom: value;
padding-right: value;
padding-left: value;

# shorthand
padding: all-side-value; 
padding: top-bottom right-left;
padding: top left-right bottom;
padding: top right bottom left;

Ví dụ