Margin trong CSS: Trong CSS, thuộc tính margin được sử dụng để điều chỉnh khoảng cách giữa các phần tử HTML và xác định không gian xung quanh chúng. Thuộc tính này ảnh hưởng đến khoảng cách giữa phần tử và các phần tử khác xung quanh nó. Dưới đây là một số ví dụ về cách sử dụng thuộc tính margin trong CSS:
- Margin Đơn (Single Margin): Điều chỉnh khoảng cách xung quanh phần tử.
css
/* Đặt margin đơn cho tất cả các cạnh là 10px */
margin: 10px;
/* Đặt margin đơn khác nhau cho từng cạnh (trên, phải, dưới, trái) */
margin: 5px 10px 15px 20px; /* trên, phải, dưới, trái */
- Margin Theo Cạnh (Margin on Specific Sides): Điều chỉnh margin cho từng cạnh riêng lẻ.
css
/* Đặt margin trên là 15px */
margin-top: 15px;
/* Đặt margin dưới là 20px */
margin-bottom: 20px;
- Auto Margin (Auto Margin): Sử dụng
autođể tự động căn chỉnh phần tử trong khung chứa.
css
/* Căn chỉnh phần tử vào giữa theo chiều ngang */
margin-left: auto;
margin-right: auto;
- Negative Margin (Negative Margin): Sử dụng giá trị âm để tạo ra hiệu ứng chồng lấn giữa các phần tử.
css
/* Đặt margin âm để chồng lấn phần tử lên phần tử bên dưới */
margin-top: -10px;
- Margin Collapse (Margin Collapse): Khi hai phần tử có margin đứng liền kề nhau, margin lớn hơn sẽ được sử dụng.
css
/* Margin giữa các phần tử bên trong đè lên margin của phần tử ngoài */
/* Ví dụ, nếu có hai phần tử <p> liền kề, margin-bottom của phần tử trên sẽ áp dụng cho phần tử dưới */
Nhớ rằng, khi sử dụng margin, bạn có thể kiểm soát khoảng cách giữa các phần tử và tạo ra các hiệu ứng khoảng cách khác nhau để tạo bố cục và giao diện phù hợp cho trang web của bạn.