Hướng dẫn cách lề html

1) Lề là gì !?

- Trong Bài 06 thì tôi đã có giới thiệu sơ qua cho các bạn biết lề là gì rồi !

- Lề (margin) là khoảng cách nằm giữa đường viền của phần tử đến một phần tử khác.

2) Thiết lập khoảng cách lề cho một phần tử

- Để thiết lập khoảng cách lề cho một phần tử thì chúng ta cần phải thiết lập thuộc tính margin cho phần tử đó với cú pháp như sau:

margin: value;

- Trong đó, value là khoảng cách từ đường viền của phần tử này đến một phần tử khác, nó được xác định dựa theo một trong bốn loại giá trị:

3) Thiết lập khoảng cách lề ở riêng từng phía

- Sau khi tìm hiểu xong phần hướng dẫn ở trên thì chắc các bạn cũng đã thấy: "khi chúng ta thiết lập thuộc tính margin cho một phần tử HTML thì mặc định khoảng cách lề nằm ở cả bốn phía của phần tử sẽ bằng nhau"

- Tuy nhiên, trước khi đi vào tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên từng vị trí của lề (bên dưới là ảnh minh họa từng vị trí của lề & tên của chúng)

3.1) Thiết lập nhiều giá trị cho thuộc tính margin

margin: value1 value2 value3 value4;

- Lề phía trên (top) sẽ có khoảng cách là value1.

- Lề bên phải (right) sẽ có khoảng cách là value2.

- Lề phía dưới (bottom) sẽ có khoảng cách là value3.

- Lề bên trái (left) sẽ có khoảng cách là value4.

margin: value1 value2 value3;

- Lề phía trên (top) sẽ có khoảng cách là value1.

- Lề bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.

- Lề phía dưới (bottom) sẽ có khoảng cách là value3.

margin: value1 value2;

- Lề phía trên (top) & phía dưới (bottom) sẽ có khoảng cách là value1.

- Lề bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.

3.2) Thêm "tên vị trí" vào phía sau thuộc tính margin

- Để thiết lập khoảng cách lề ở riêng từng phía cho phần tử bằng cách thêm tên vị trí vào phía sau thuộc tính margin thì chúng ta sử dụng cú pháp như sau:

margin-tênvịtrí: value;

    
    


    
LẬP TRÌNH WEB
    

    
- Lề phía trên là 25 pixel
    
- Lề bên phải là 300 pixel
    
- Lề phía dưới là 100 pixel
    
- Lề bên trái là 50 pixel

Xem ví dụ

Thuộc tính margin dùng để canh lề cho phần tử.

Dưới đây là một số thuộc tính margin:

• margin-top (canh lề phía trên)
• margin-right (canh lề bên phải)
• margin-bottom (canh lề phía dưới)
• margin-left (canh lề bên trái)

Ví dụ minh họa:

Phần tử này có:

• Khoảng cách lề phía trên (margin-top) là 0px;
• Khoảng cách lề bên phải (margin-right) là 200px;
• Khoảng cách lề phía dưới (margin-bottom) là 50px;
• Khoảng cách lề bên trái (margin-left) là 100px;

h2{
    margin-top:20px;
    margin-right:40px;
    margin-bottom:80px;
    margin-left:160px;
}

Xem ví dụ

Lưu ý: Giá trị của thuộc tính margin có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó), auto (trình duyệt tự động thiết lập giá trị)

    


    

        
HƯỚNG DẪN HỌC LẬP TRÌNH WEB
    
    

    
HƯỚNG DẪN THIẾT KẾ WEB
    

    
WEB CƠ BẢN

Xem ví dụ

Cú pháp canh lề rút gọn

Thay vì phải canh lề bởi bốn thuộc tính (margin-top, margin-right, margin-bottom, margin-left) riêng biệt, thì ta có thể gôm chúng lại thành một. Với cách này, ta có bốn cú pháp như sau:

margin: value;

• Cả bốn vị trí đều có cùng giá trị value

margin: value1 value2;

• margin-top & margin-bottom có giá trị value1
• margin-right & margin-left có giá trị value2

margin: value1 value2 value3;

• margin-top có giá trị value1
• margin-right & margin-left có giá trị value2
• margin-bottom có giá trị value3

margin: value1 value2 value3 value4;

• margin-top có giá trị value1
• margin-right có giá trị value2
• margin-bottom có giá trị value3
• margin-left có giá trị value4

.div1{
    margin:50px;
}
.div2{
    margin:10px 100px;
}
.div3{
    margin:10px 100px 50px;
}
.div4{
    margin:20px 40px 80px 160px;
}

Xem ví dụ