Căn Lề trong CSS

Lề của phần tử là phần diện tích bao quanh bên ngoài đường viền phần tử. Trong CSS để căn lề cho phần tử chúng ta sử dụng các thuộc tính margin.

p {
    margin: 50px 20px 50px 20px;
}

Lề trong CSS

Khai báo trong đoạn mã CSS trên đây sử dụng thuộc tính margin để căn lề cho phần tử p với lề bên trên và dưới là 50px, lề bê phải và trái là 20px:

Căn Lề Từng Bên

Bạn có thể căn lề từng bên cho phần tử sử dụng các thuộc tính sau:

• Thuộc tính margin-top: Căn lề bên trên cho phần tử.
• Thuộc tính margin-right: Căn lề bên phải cho phần tử.
• Thuộc tính margin-bottom: Căn lề bên dưới cho phần tử.
• Thuộc tính margin-left: Căn lề bên trái cho phần tử.

Ví dụ:

p {
    margin-top: 50px;
    margin-right: 20px;
    margin-bottom: 50px;
    margin-left: 20px;
}

Các Thuộc Tính Căn Lề trong CSS

Thuộc Tính Margin Tốc Ký - Margin Shorthand Property

Thuộc tính tốc ký hay shorthand property trong CSS được sử dụng để giúp lập trình viên rút ngắn số lượng code phải viết qua đó giảm dung lượng file CSS và giúp trang web được tải nhanh hơn.

Thuộc tính margin là một thuộc tính tốc ký trong CSS, nó có tác dụng gộp các thuộc tính canh lề từng bên và theo thứ tự sau:

• Thuộc tính margin-top.
• Thuộc tính margin-right.
• Thuộc tính margin-bottom.
• Thuộc tính margin-left.

Giá trị của thuộc tính margin tốc ký bao gồm từ một cho tới bốn giá trị khác nhau ngăn cách bởi khoảng trắng.

Thuộc tính margin tốc ký với đầy đủ bốn giá trị:

p {
    margin: 5px 10px 15px 20px;
}

Thuộc Tính Tốc Ký Margin

Với đoạn code CSS như trên thì lề của các bên sẽ được căn như sau:

• Lề trên: 5px.
• Lề phải: 10px.
• Lề dưới: 15px.
• Lề trái: 20px.

Thuộc tính margin tốc ký với ba giá trị:

p {
  margin: 5px 10px 15px;
}

Margin Tốc Ký Với Ba Giá Trị

Với đoạn code CSS như trên thì lề của các bên sẽ được căn như sau:

• Lề trên: 5px.
• Lề phải và trái: 10px.
• Lề dưới: 15px.

Thuộc tính margin tốc ký với hai giá trị:

p {
  margin: 5px 10px;
}

Margin Tốc Ký Với Hai Giá Trị

Với đoạn code CSS như trên thì lề của các bên sẽ được căn như sau:

• Lề trên và dưới: 5px.
• Lề phải và trái: 10px.

Thuộc tính margin tốc ký với duy nhất giá trị:

p {
  margin: 5px;
}

Margin Tốc Ký Với Một Giá Trị

Lúc này phần tử p sẽ được thiết lập lề ở cả bốn bên là 5px.

Giá trị mặc định của các thuộc tính margin là 0, tuy nhiên khi hiển thị trang trình duyệt cũng sẽ thiết lập lề cho mỗi phần tử với giá trị tuỳ vào loại phần tử.

Căn Lề Tự Động

Căn lề tự động được áp dụng khi giá trị của thuộc tính margin là auto:

h1 {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    border: 1px solid red;
}

Căn Lề Tự Động

Đối với những phần tử khối (block) hoặc nội dòng - khối (inline-block) như phần tử h1, p, div... thì khi căn lề tự động cho lề trái và lề phải thì phần tử sẽ được căn giữa đều hai bên.