Căn Lề Trong CSS - Học CSS Online - VietTuts

Trang chủ » Căn Trên Dưới Css » Căn Lề Trong CSS - Học CSS Online - VietTuts

Có thể bạn quan tâm

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS Bảng trong CSS List trong CSS

Để 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.

Nội dung chính

  • Thuộc tính margin trong CSS
  • Thuộc tính margin-bottom trong CSS
  • Thuộc tính margin-top trong CSS
  • Thuộc tính margin-left trong CSS
  • Thuộc tính margin-right 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> <meta charset="UTF-8"> </head> <body> <p style="margin: 15px; border:1px solid black;"> Cả 4 lề: trên, dưới, trái và phải đều có độ rộng là 15px </p> <p style="margin:10px 2%; border:1px solid black;"> Lề trên và lề dưới là 10px. Lề trái và lề phải bằng 2% tổng độ rộng của trang. </p> <p style="margin: 10px 2% -10px; border:1px solid black;"> Lề trên là 10px. Độ rộng của lề trái và lề phải bằng 2% tổng độ rộng của trang. Lề dưới là -10px. </p> <p style="margin: 10px 2% -10px auto; border:1px solid black;"> Lề trên là 10px. Độ rộng của lề phải bằng 2% tổng độ rộng của trang. Lề dưới là -10px. Và lề trái sẽ được thiết lập tự động bởi trình duyệt. </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="margin-bottom: 15px; border:1px solid black;"> Đoạn văn này có lề dưới bằng giá trị độ rộng là 15px. </p> <p style="margin-bottom: 5%; border:1px solid black;"> Đoạn văn này có lề dưới bằng giá trị độ rộng là 5%. </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="margin-top: 15px; border:1px solid black;"> Đoạn văn này có lề trên bằng giá trị độ rộng là 15px. </p> <p style="margin-top: 5%; border:1px solid black;"> Đoạn văn này có lề trên bằng giá trị độ rộng là 5%. </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="margin-left: 15px; border:1px solid black;"> Đoạn văn này có lề trái bằng giá trị độ rộng là 15px. </p> <p style="margin-left: 5%; border:1px solid black;"> Đoạn văn này có lề trái bằng giá trị độ rộng là 5%. </p> </body> </html>

Kết quả:

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> <meta charset="UTF-8"> </head> <body> <p style="margin-right: 15px; border:1px solid black;"> Đoạn văn này có lề phải bằng giá trị độ rộng là 15px. </p> <p style="margin-right: 5%; border:1px solid black;"> Đoạn văn này có lề phải bằng giá trị độ rộng là 5%. </p> </body> </html>

Kết quả:

Bảng trong CSS List trong CSS

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring Học Excel | Excel VBA Học Servlet | JSP | Struts2 Học C | C++ | C# Học Python Học SQL

Bài Tập Có Lời Giải

Bài tập Java Bài tập C Bài tập C++ Bài tập C# Bài tập Python Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java 25 câu hỏi phỏng vấn servlet 75 câu hỏi phỏng vấn jsp 52 câu hỏi phỏng vấn Hibernate 70 câu hỏi phỏng vấn Spring 57 câu hỏi phỏng vấn SQL

Từ khóa » Căn Trên Dưới Css