Khóa học IT CSS Cơ bản 025_Lề và Đệm - Ghi chú kỹ thuật của zhaoJian

Lề

Trong CSS, lề và đệm là hai khái niệm khác nhau, đều được sử dụng để kiểm soát khoảng cách giữa các phần tử và ảnh hưởng đến bố cục trang.

Hiệu ứng ví dụ

Lề (Margin - Khoảng cách ngoài)

Lề (margin) là khoảng cách giữa một phần tử và các phần tử liền kề của nó. Lề có thể được sử dụng để kiểm soát khoảng cách giữa các phần tử và ảnh hưởng đến bố cục trang. Lề không có màu nền, hoàn toàn trong suốt và không ảnh hưởng đến kích thước thực tế của phần tử. Có thể là giá trị dương hoặc âm, với đơn vị có thể là pixel (px), phần trăm (%), em, v.v.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Hiệu ứng: Hiệu ứng ví dụ Có thể sử dụng margin-top, margin-right, margin-bottom, margin-left để đặt lề cho một hướng cụ thể riêng biệt.

Ví dụ:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Hiệu ứng:

Hiệu ứng ví dụ

Đệm (Padding - Khoảng cách trong)

Đệm (padding) là khoảng cách giữa nội dung bên trong phần tử và viền của phần tử. Đệm có thể được sử dụng để điều chỉnh khoảng cách giữa nội dung bên trong phần tử và viền của nó, ảnh hưởng đến kích thước và bố cục của phần tử. Đệm kế thừa màu nền của phần tử và ảnh hưởng đến kích thước thực tế của phần tử. Không hỗ trợ giá trị âm, với đơn vị có thể là pixel (px), phần trăm (%), em, v.v.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">kiểm tra padding</div>
2
    <br>
3
    <div class="base example2">kiểm tra padding</div>
4
    <br>
5
    <div class="base example3">kiểm tra padding</div>

Hiệu ứng:

Hiệu ứng ví dụ Có thể sử dụng padding-top, padding-right, padding-bottom, padding-left để đặt đệm cho một hướng cụ thể riêng biệt.

Ví dụ:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">kiểm tra padding</div>

Hiệu ứng: Hiệu ứng ví dụ

Lề

Lề (Margin - Khoảng cách ngoài)

Đệm (Padding - Khoảng cách trong)

Bình luận