Thuộc Tính Margin Trong CSS - Web Cơ Bản

Trang chủ » Câu Lệnh Margin Trong Css » Thuộc Tính Margin Trong CSS - Web Cơ Bản

Có thể bạn quan tâm

  • HTML
  • CSS
  • JAVASCRIPT
  • JQUERY
  • MYSQL
  • PHP
CSS Thuộc tính margin trong CSS Thuộc tính margin trong CSS

1) Nhắc lại "các thành phần của một phần tử"

- Thông thường, cấu trúc của một phần tử HTML sẽ bao gồm bốn thành phần:

  • margin (phần lề nằm giữa đường viền của phần tử với các phần tử xung quanh)
  • border (đường viền của phần tử)
  • padding (vùng đệm nằm giữa đường viền của phần tử với nội dung của phần tử)
  • content (nội dung của phần tử)

- Dưới đây là hình ảnh minh họa về cấu trúc của một phần tử HTML.

margin border padding content

2) Thuộc tính margin trong CSS

- Thuộc tính margin dùng để xác định khoảng cách lề của phần tử HTML.

Ví dụ:

- Xác định khoảng cách lề của phần tử HTML có nền màu vàng.

margin:

0px;

25px;

50px;

75px;

100px;

3) Cách sử dụng thuộc tính margin trong CSS

- Để sử dụng thuộc tính margin, ta dùng cú pháp như sau:

margin: auto|length|percent|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính margin có thể được xác định bởi một trong năm loại:

auto

- Trình duyệt sẽ tự động xác định khoảng cách lề của phần tử.

 Xem ví dụ
length

- Chỉ định khoảng cách lề của phần tử bởi một giá trị cụ thể.

(giá trị này có thể được xác định theo đơn vị px, em, cm)
percent

- Chỉ định khoảng cách lề của phần tử dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần tử chứa nó.

- Ví dụ: Ta có một phần tử A dùng để chứa phần tử B, phần nội dung của phần tử A có chiều rộng là 200px.

  • Nếu thiết lập thuộc tính margin cho phần tử B với giá trị 50% thì khoảng cách lề của phần tử B sẽ là 100px.
  • Nếu thiết lập thuộc tính margin cho phần tử B với giá trị 20% thì khoảng cách lề của phần tử B sẽ là 40px.
  • . . . .
initial

- Sử dụng giá trị mặc định của nó.
inherit

- Kế thừa giá trị thuộc tính margin từ phần tử cha của nó.

 Xem ví dụ

4) Xác định khoảng cách lề ở từng vị trí

- Khi chúng ta sử dụng thuộc tính margin với cú pháp ở phần hướng dẫn phía trên thì mặc định khoảng cách lề ở cả bốn vị trí của phần tử sẽ có chung một giá trị.

- Tuy nhiên, nếu muốn khoảng cách lề ở mỗi vị trí của phần tử có một giá trị riêng biệt (giống phần tử có nền màu vàng bên dưới), thì ta phải làm như thế nào !?

- Để xác định khoảng cách lề ở từng vị trí thì ta có một số cú pháp như sau:

4.1) Cú pháp 1

margin: value1 value2 value3 value4;
  • Lề phía trên của phần tử sẽ có khoảng cách là value1
  • Lề bên phải của phần tử sẽ có khoảng cách là value2
  • Lề phía dưới của phần tử sẽ có khoảng cách là value3
  • Lề bên trái của phần tử sẽ có khoảng cách là value4
Ví dụ: <!DOCTYPE html> <html> <head> <style type="text/css"> .father{ border:10px solid #13da22; display:inline-block; } .child{ width:200px; height:200px; background-color:yellow; margin:50px 100px 10px 200px; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html> Xem ví dụ

4.2) Cú pháp 2

margin: value1 value2 value3;
  • Lề phía trên của phần tử sẽ có khoảng cách là value1
  • Lề bên trái & bên phải của phần tử sẽ có khoảng cách là value2
  • Lề phía dưới của phần tử sẽ có khoảng cách là value3
Ví dụ: <!DOCTYPE html> <html> <head> <style type="text/css"> .father{ border:10px solid #13da22; display:inline-block; } .child{ width:200px; height:200px; background-color:yellow; margin:25px 150px 10px; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html> Xem ví dụ

4.3) Cú pháp 3

margin: value1 value2;
  • Lề phía trên & phía dưới của phần tử sẽ có khoảng cách là value1
  • Lề bên trái & bên phải của phần tử sẽ có khoảng cách là value2
Ví dụ: <!DOCTYPE html> <html> <head> <style type="text/css"> .father{ border:10px solid #13da22; display:inline-block; } .child{ width:200px; height:200px; background-color:yellow; margin:25px 150px; } </style> </head> <body> <div class="father"> <div class="child"></div> </div> </body> </html> Xem ví dụ Tổng quan về CSS Làm thế nào để định dạng cho một phần tử ? Những kiến thức cơ bản trong việc viết mã CSS Xác định màu sắc (color) trong CSS Cách xác định bộ chọn (selector) của phần tử Cấu trúc phần tử trong CSS Tạo đường viền (border) cho phần tử Đường viền hình ảnh Thiết lập vùng đệm (padding) cho phần tử Xác định khoảng cách lề (margin) của phần tử Màu nền (background color) Kích thước phần tử Hình nền (background image) Thiết lập độ cong (radius) cho các góc của phần tử Tạo cái bóng (shadow) cho phần tử Các thuộc tính định dạng DANH SÁCH Các thuộc tính định dạng VĂN BẢN Bộ chọn dựa trên quan hệ huyết thống Cách xác định bộ chọn trong một số trường hợp đặc biệt Bộ chọn của các “thành phần” bên trong phần tử Cách định dạng cho bảng (table) bằng CSS Thuộc tính box-sizing trong CSS Các loại dấu trích dẫn (quote) được hỗ trợ trong CSS Chia văn bản thành nhiều cột Tạo một vài hiệu ứng đơn giản cho hình ảnh Chỉnh độ trong suốt của phần tử Tạo thanh cuộn (scroll) cho phần tử Xác định kiểu hiển thị (display) của phần tử Thiết lập vị trí cho phần tử Hiệu ứng chuyển động Cách sử dụng nhóm thuộc tính Transition Định dạng cho Liên kết Thuộc tính Float & Clear trong CSS Độ ưu tiên hiển thị là gì ?

Từ khóa » Câu Lệnh Margin Trong Css