Căn lề trong CSS | Margin trong CSS PDF can le trong css

http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Căn lề CSS Để xác định phần không gian xung quanh phần tử, bạn sử dụng thuộc tính margintrong CSS Thuộc tính margin thiết lâp kích cỡ phần khoảng trống BÊN NGOÀI đường viền Với margin, bạn xác định giá trị âm cho thuộc tính để tạo phần nội dung gối lên Giá trị thuộc tính margin khơng kế thừa phần tử Bạn nhớ lề dọc lân cận (các lề lề dưới) kết hợp thành lề Để lề cho phần tử, bạn có thuộc tính sau: • Thuộc tính margin: sử dụng thuộc tính bạn thiết lập tất style liên quan tới việc lề khai báo CSS • Thuộc tính margin-bottom lề phần tử • Thuộc tính margin-top lề phần tử • Thuộc tính margin-left lề trái phần tử • Thuộc tính margin-right lề phải phần tử Tất thuộc tính liên quan tới Margin nhận giá trị sau: • auto: Trình duyệt tự động ước lượng việc lề cho phần tử • length: Xác định độ rộng (đơn vị px, pt, cm, …) lề Giá trị mặc định • %: Xác định mối quan hệ lề với độ rộng phần tử chứa lề • inherit: Kế thừa thuộc tính từ phần tử cha chứa phần tử có thuộc tính margin Phần trình bày chi tiết cách sử dụng thuộc tính CSS http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Thuộc tính margin CSS Sử dụng thuộc tính margin, bạn xác định tất Style Rule liên quan tới việc lề CSS Với margin, bạn viết code mà tạo tất style cho lề Thuộc tính có cú pháp giống sau: p { margin: 100px 150px 100px 80px; } Bạn theo dõi ví dụ sau theo dõi cách hoạt động: Nếu thuộc tính margin có giá trị: margin: 25px 50px 75px 100px; • Lề 25px • Lề phải 50px • Lề 75px • Lề trái 100px Nếu thuộc tính margin có giá trị: margin: 25px 50px 75px; • Lề 25px • Lề phải trái 50px • Lề 75px Nếu thuộc tính margin có giá trị: margin: 25px 50px; • Lề lề 25px • Lề phải lề trái 50px Nếu thuộc tính margin có giá trị: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     margin: 25px; • Các lề trên, lề dưới, lề trái, lề phải 25px Ví dụ

Ca le: tren, duoi, trai va phai deu co rong le la 15px

Le tren va le duoi la 10px Do rong cua le trai va le phai bang 2% tong rong cua trang

Le tren la 10px Do rong cua le trai va le phai bang 2% tong rong cua trang Le duoi la -10px

Le tren la 10px Do rong cua le phai bang 2% tong rong cua trang Le duoi la -10px, va le trai se duoc thiet lap tu dong boi trinh duyet

Đây kết Ca le: tren, duoi, trai va phai deu co rong le la 15px Le tren va le duoi la 10px Do rong cua le trai va le phai bang 2% tong rong cua trang Le tren la 10px Do rong cua le trai va le phai bang 2% tong rong cua trang Le duoi la -10px Le tren la 10px Do rong cua le phai bang 2% tong rong cua trang Le duoi la -10px, va le trai se duoc thiet lap tu dong boi trinh duyet Thuộc tính margin-bottom CSS Để lề cho phần tử, bạn sử dụng thuộc tính margin-bottom CSS Thuộc tính nhận giá trị độ rộng % auto Ví dụ sau minh họa cách sử dụng thuộc tính margin-bottom CSS:

Doan van co Le duoi duoc xac dinh cu the bang gia tri rong la 15 pixel

Doan van co Le duoi duoc xac dinh cu the bang gia tri rong la 5%

Kết là: http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Doan van co Le duoi duoc xac dinh cu the bang gia tri rong la 15 pixel Doan van co Le duoi duoc xac dinh cu the bang gia tri rong la 5% Thuộc tính margin-top CSS Để lề cho phần tử, bạn sử dụng thuộc tính margin-top CSS Thuộc tính nhận giá trị độ rộng % auto Ví dụ sau minh họa cách sử dụng thuộc tính margin-top CSS:

Doan van co Le tren duoc xac dinh cu the bang gia tri rong la 15 pixel

Doan van co Le tren duoc xac dinh cu the bang gia tri rong la 5%

Kết là: Doan van co Le tren duoc xac dinh cu the bang gia tri rong la 15 pixel Doan van co Le tren duoc xac dinh cu the bang gia tri rong la 5% Thuộc tính margin-left CSS Để lề trái cho phần tử, bạn sử dụng thuộc tính margin-left CSS Thuộc tính nhận giá trị độ rộng % auto Ví dụ sau minh họa cách sử dụng thuộc tính margin-left CSS:

Doan van co Le trai duoc xac dinh cu the bang gia tri rong la 15 pixel

Doan van co Le trai duoc xac dinh cu the bang gia tri rong la 5%

Kết là: Doan van co Le trai duoc xac dinh cu the bang gia tri rong la 15 pixel http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     http://vietjack.com/css/index.jsp                                                                                                              Copyright  ©  vietjack.com     Doan van co Le trai duoc xac dinh cu the bang gia tri rong la 5% Thuộc tính margin-right CSS Để lề phải cho phần tử, bạn sử dụng thuộc tính margin-right CSS Thuộc tính nhận giá trị độ rộng % auto Ví dụ sau minh họa cách sử dụng thuộc tính margin-right CSS:

Doan van co Le phai duoc xac dinh cu the bang gia tri rong la 15 pixel

Doan van co Le phai duoc xac dinh cu the bang gia tri rong la 5%

Kết là: Doan van co Le phai duoc xac dinh cu the bang gia tri rong la 15 pixel Doan van co Le phai duoc xac dinh cu the bang gia tri rong la 5%   http://vietjack.com/                                                                                                                              Trang  chia  sẻ  các  bài  học  online  miễn  phí     ... margin có giá trị: margin: 25px 50px 75px 100px; • Lề 25px • Lề phải 50px • Lề 75px • Lề trái 100px Nếu thuộc tính margin có giá trị: margin: 25px 50px 75px; • Lề 25px • Lề phải trái 50px • Lề. .. Thuộc tính margin- left CSS Để lề trái cho phần tử, bạn sử dụng thuộc tính margin- left CSS Thuộc tính nhận giá trị độ rộng % auto Ví dụ sau minh họa cách sử dụng thuộc tính margin- left CSS: ... black;"> Le tren va le duoi la 10px Do rong cua le trai va le phai bang 2% tong rong cua trang

Le tren la 10px Do rong cua le trai va le