Căn Lề

Nam Nguyễ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;
}

Chạy Code

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;
}

Chạy Code

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;
}

Chạy Code

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;
}

Chạy Code

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;
}

Chạy Code

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;
}

Chạy Code

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 margin0, 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 marginauto:

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

Chạy Code

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

Thêm Phản Hồi

Câu Hỏi Liên Quan

Hướng Dẫn Liên Quan

  • Hàm trong PHP

    Hướng dẫn cách sử dụng các hàm thông dụng trong PHP với source code ví dụ kèm theo.
  • Git Cơ Bản

    Hướng dẫn này sẽ giúp các bạn tìm hiểu về các chức năng cơ bản của Git, phần mềm hàng đầu trong quản...
  • Học HTML

    Với HTML bạn có thể tạo một website cho chính mình. Trong bài hướng dẫn này bạn sẽ được học về HT...
  • Lập Trình PHP và MySQL Cơ Bản

    Bài hướng dẫn này sẽ giúp các bạn tìm hiểu cách sử dụng PHP để: - Kết nối với database MySQL -...