Thuộc tính Margin trong CSS

Bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính border trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về các thuộc tính Margin trong CSS.

Thuộc tính Margin trong CSS được sử dụng để tạo khoảng trống xung quanh các phần tử, bên ngoài các tạo viền trong word. Tham khảo tiếp bài học CSS dưới đây của Taimienphi.vn để tìm hiểu các thuộc tính Margin trong CSS.

thuoc tinh margin trong css hoc css

Thuộc tính Margin trong CSS

 

Mục Lục bài viết:
1. Thuộc tính Margin trong CSS
1.1. Thuộc tính Margin rút gọn
1.2. Giá trị auto
1.3. Giá trị inherit
1.4. Margin Collapse trong CSS
1.5. Các thuộc tính Margin trong CSS

1. Thuộc tính Margin trong CSS

CSS bao gồm các thuộc tính để chỉ định, canh lề cho từng phần phần của phần tử:

margin-top
margin-right
margin-bottom
margin-left

Tất cả các thuộc tính margin có thể bao gồm các giá trị:

- auto: tính toán canh lề trong trình duyệt.

- length: canh lề ở định dạng px, pt, cm, ... .

- %: canh lề theo % chiều rộng của phần tử chứa.

- inherit: chỉ định lề phải được kế thừa từ phần tử cha.

Mẹo: các giá trị âm cũng được cho phép.

Ví dụ: Trong ví dụ dưới đây canh 4 lề khác nhau cho 4 phần của phần tử tử p:

thuoc tinh margin trong css

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 2

1.1. Thuộc tính Margin rút gọn

Để rút gọn mã, chúng ta có thể khai báo tất cả các thuộc tính margin trong một thuộc tính duy nhất.

Thuộc tính margin rút gọn, khai báo các thuộc tính dưới đây:

margin-top

margin-right

margin-bottom

margin-left

Trong đó:

- 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

Ví dụ 1:

thuoc tinh margin trong css 3

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 4

- 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

Ví dụ 2:

thuoc tinh margin trong css 5

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 6

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

margin: 25px 50px;

Lề trên và dưới là 25px

Lề phải và trái là 50px

Ví dụ 3:

thuoc tinh margin trong css 7

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 8

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

margin: 25px;

Giá trị 4 lề là 25px.

Ví dụ 4:

thuoc tinh margin trong css 9

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 10

1.2. Giá trị auto

Chúng ta có thể thiết lập giá trị thuộc tính margin là auto để tự động căn chỉnh giữa các phần tử bên trong container của nó.

Phần tử đó sẽ áp dụng chiều rộng được chỉ định và phần khoảng trống còn lại sẽ được chia đều cho lề trái và lề phải.

Ví dụ:

thuoc tinh margin trong css 11

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 12

1.3. Giá trị inherit

Trong ví dụ dưới đây cho phép lề trái của phần tử (p class="ex1") được kế thừa từ phần tử cha (div).

Ví dụ:

thuoc tinh margin trong css 13

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 14

1.4. Margin Collapse trong CSS

Đôi khi chúng ta có thể gộp lề trên và dưới của các phần tử thành một lề duy nhất bằng cách lấy giá trị được tính từ tổng 2 lề.

Lưu ý: phương pháp này chỉ áp dụng cho lề trên và lề dưới, không áp dụng cho lề trái và lề phải.

Ví dụ:

thuoc tinh margin trong css 15

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh margin trong css 16

Trong ví dụ trên, lề dưới của phần tử h1 là 50px và lề trên của phần tử p là 20px.

Tổng giá trị của 2 lề là 70 px (50px + 20px), tuy nhiên vì thuộc tính margin collapse gộp các lề là 1 nên giá trị lề thực tế là 50px.

1.5. Các thuộc tính Margin trong CSS

Dưới đây là bảng danh sách các thuộc tính Margin trong CSS:

thuoc tinh margin trong css 17

https://thuthuat.taimienphi.vn/thuoc-tinh-margin-trong-css-50600n.aspx
Bài học CSS trên đây Taimienphi.vn vừa giới thiệu cho bạn về các thuộc tính Margin trong CSS. Trong các bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn thuộc tính định dạng danh sách list trong CSS nhé.

Tác giả: Phí Quỳnh Anh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thuộc tính Outline trong CSS
Thuộc tính tùy chỉnh kích thước trong CSS
Học thuộc tính cursor trong CSS, có ví dụ
Tìm hiểu Link trong CSS, cú pháp và ví dụ
CSS là gì?
Từ khoá liên quan:

Thuộc tính Margin trong CSS

, CSS, học CSS,

SOFT LIÊN QUAN
  • Rapid CSS

    Chỉnh sửa mã nguồn CSS

    Rapid CSS là một trình soạn thảo nâng cao có thể giúp bạn dễ dàng tạo và sửa tập tin định dạng CSS với bất kỳ kích thước và độ phức tạp cao với rất nhiều chức năng trợ giúp như tự động hoàn thành, khảo sát mã và kiểm tra ...

Tin Mới

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong CSS.

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong CSS.

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong CSS.

  • Code Nữ Thần Vô Song nhận tướng mặt trời, kim cương

    Cập nhật code Nữ Thần Vô Song mới nhất Kim Cương, Tướng Nữ Thần cấp cao để nhanh chóng thành lập tổ đội diệt ma xô, tăng lực chiến để đánh bại thế