Căn Lề Trong CSS | Margin Trong CSS

Có thể bạn quan tâm

CSS cơ bản
Giới thiệu CSS
CSS là gì ?
Cú pháp CSS
Include CSS vào HTML
Đơn vị
Màu (Color)
Background
Định dạng Font
Định dạng Text
Hình ảnh
Trang trí Link
Bảng
Đường viền (Border)
Căn lề (Margin)
List và Marker
Padding
Con trỏ (Cursor)
Outline
Kích thước
Scrollbar

CSS nâng cao
Visibility
Căn chỉnh vị trí
Layer (Thuộc tính z-index)
Giới thiệu Pseudo Class
Phần tử giả (Pseudo Element)
Qui tắc @
Media Type
Qui tắc @page
Định dạng trước khi in
Thiết lập Layout
Validation

Học CSS3 cơ bản
Giới thiệu CSS3
Rounded Corner
Thuộc tính Border Image
Multi Background
Màu trong CSS3
Gradient là gì ?
Tạo Shadow
Tạo hiệu ứng cho Text
Web Font
2D Transform
3D Transform
Hiệu ứng (Animation)
Chia cột (Multi Column)
User Interface
Thuộc tính box-sizing

Khái niệm CSS Responsive
CSS Responsive là gì ?

Tra cứu nhanh CSS
Tổng hợp tất cả Thuộc tính
Danh sách tên màu
Web Safe Font
Tổng hợp các Hiệu ứng

CSS Tool
Chuyển đổi PX sang EM

Căn lề trong CSS Trang trước Trang sau

Để xác định phần không gian xung quanh các phần tử, bạn sử dụng thuộc tính margin trong CSS. Thuộc tính margin thiết lâp kích cỡ của phần khoảng trống BÊN NGOÀI đường viền. 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 gối lên nhau.

Giá trị của thuộc tính margin không được kế thừa bởi các phần tử con. Bạn hãy nhớ rằng các lề dọc lân cận (các lề trên và lề dưới) sẽ kết hợp thành một lề.

Để căn lề cho một phần tử, bạn có các thuộc tính sau:

Thuộc tính margin: sử dụng thuộc tính này bạn có thể thiết lập tất cả style liên quan tới việc căn lề chỉ trong một khai báo CSS.
Thuộc tính margin-bottom căn lề dưới của một phần tử.
Thuộc tính margin-top căn lề trên của một phần tử.
Thuộc tính margin-left căn lề trái của một phần tử.
Thuộc tính margin-right căn lề phải của một phần tử.

Tất cả các thuộc tính liên quan tới Margin trên đều có thể nhận các giá trị sau:

auto: Trình duyệt tự động ước lượng việc căn lề cho phần tử.
length: Xác định độ rộng (đơn vị px, pt, cm, …) của lề. Giá trị mặc định là 0.
%: Xác định mối quan hệ giữa lề với độ rộng của phần tử chứa lề.
inherit: Kế thừa thuộc tính này từ phần tử cha chứa phần tử có thuộc tính margin này.

Phần tiếp theo sẽ trình bày chi tiết cách sử dụng các thuộc tính này trong CSS.

Thuộc tính margin trong CSS

Sử dụng thuộc tính margin, bạn có thể xác định tất cả Style Rule liên quan tới việc căn lề trong CSS. Với margin, bạn viết ít code hơn mà vẫn có thể tạo tất cả style cho lề. Thuộc tính này có cú pháp giống như sau:

p { margin: 100px 150px 100px 80px; }

Bạn theo dõi các ví dụ sau và theo dõi cách nó hoạt động:

Nếu thuộc tính margin có 4 giá trị:

margin: 25px 50px 75px 100px;

Lề trên là 25px
Lề phải là 50px
Lề dưới là 75px
Lề trái là 100px

Nếu thuộc tính margin có 3 giá trị:

margin: 25px 50px 75px;

Lề trên là 25px
Lề phải và trái là 50px
Lề dưới là 75px

Nếu thuộc tính margin có 2 giá trị:

margin: 25px 50px;

Lề trên và lề dưới là 25px
Lề phải và lề trái là 50px

Nếu thuộc tính margin có 1 giá trị:

margin: 25px;

Các lề trên, lề dưới, lề trái, và lề phải là 25px

Ví dụ

<html> <head> </head> <body> Ca 4 le: tren, duoi, trai va phai deu co do rong le la 15px Le tren va le duoi la 10px. Do rong cua le trai va le phai bang 2% tong do rong cua trang. Le tren la 10px. Do rong cua le trai va le phai bang 2% tong do rong cua trang. Le duoi la -10px Le tren la 10px. Do rong cua le phai bang 2% tong do rong cua trang. Le duoi la -10px, va le trai se duoc thiet lap tu dong boi trinh duyet. </body> </html>

Đây là kết quả

Quảng cáo

Thuộc tính margin-bottom trong CSS

Để căn lề dưới cho một phần tử, bạn sử dụng thuộc tính margin-bottom trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto.

Ví dụ sau minh họa cách sử dụng thuộc tính margin-bottom trong CSS:

<html> <head> </head> <body> Doan van nay co Le duoi duoc xac dinh cu the bang gia tri do rong la 15 pixel. Doan van nay co Le duoi duoc xac dinh cu the bang gia tri do rong la 5%. </body> </html>

Kết quả là:

Thuộc tính margin-top trong CSS

Để căn lề trên cho một phần tử, bạn sử dụng thuộc tính margin-top trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto.

Ví dụ sau minh họa cách sử dụng thuộc tính margin-top trong CSS:

<html> <head> </head> <body> Doan van nay co Le tren duoc xac dinh cu the bang gia tri do rong la 15 pixel. Doan van nay co Le tren duoc xac dinh cu the bang gia tri do rong la 5%. </body> </html>

Kết quả là:

Quảng cáo

Thuộc tính margin-left trong CSS

Để căn lề trái cho một phần tử, bạn sử dụng thuộc tính margin-left trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto.

Ví dụ sau minh họa cách sử dụng thuộc tính margin-left trong CSS:

<html> <head> </head> <body> Doan van nay co Le trai duoc xac dinh cu the bang gia tri do rong la 15 pixel. Doan van nay co Le trai duoc xac dinh cu the bang gia tri do rong la 5%. </body> </html>

Kết quả là:

Thuộc tính margin-right trong CSS

Để căn lề phải cho một phần tử, bạn sử dụng thuộc tính margin-right trong CSS. Thuộc tính này có thể nhận một giá trị là độ rộng hoặc % hoặc auto.

Ví dụ sau minh họa cách sử dụng thuộc tính margin-right trong CSS:

<html> <head> </head> <body> Doan van nay co Le phai duoc xac dinh cu the bang gia tri do rong la 15 pixel. Doan van nay co Le phai duoc xac dinh cu the bang gia tri do rong la 5%. </body> </html>

Kết quả là:

👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: