Thiết lập kích thước cho phần tử HTML bằng CSS, Thiết lập chiều rộng và chiều cao cho phần tử HTML, thuộc tính height, thuộc tính width, chiều rộng, chiều cao của phần tử, thiết lập chiều rộng cho khung, chiều cao cho khung, thuộc tính max-width

Thiết lập kích thước cho phần tử HTML bằng CSS, Thiết lập chiều rộng và chiều cao cho phần tử HTML, thuộc tính height, thuộc tính width, chiều rộng, chiều cao của phần tử, thiết lập chiều rộng cho khung, chiều cao cho khung, thuộc tính max-width

Thiết lập kích thước cho phần tử HTML bằng CSS

Thiết lập chiều rộng và chiều cao

Thuộc tính width dùng để thiết lập chiều rộng cho phần nội dung của phần tử.

Thuộc tính height dùng để thiết lập chiều cao cho phần nội dung của phần tử.

Lưu ý: Chiều rộng và chiều cao không bao gồm phần padding, border, margin.

Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ phần nào là chiều rộng, phần nào là chiều cao:

Margin
Border
Padding
Width
Height

Giá trị của thuộc tính width và height có thể xác định theo đơn vị: px, em, % (phần trăm kích thước phần nội dung của phần tử chứa nó)

Ví dụ

.div1{
    border: 10px solid black;
    width: 300px;
}
.div2{
    border: 10px solid red;
    width: 300px;
    padding: 30px;
    margin: 20px;
}
.div3{
    border: 1px solid blue;
    width: 50%;
    height:100px;
}

Lưu ý: Nếu ta không thiết lập chiều rộng và chiều cao cho phần tử thì trình duyệt sẽ tự động thiết lập (Nếu là phần tử khối thì nó sẽ có chiều rộng là 100%).

Thuộc tính max-width

Nếu ta thiết lập chiều rộng cho một phần tử quá dài mà trong khi phần tử chứa nó lại quá ngắn thì sẽ dẫn đến việc phần tử chứa nó tự động tạo một thanh scroll nằm ngang mất thẫm mỹ (Xem ví dụ)

Từ đây, thuộc tính max-width được dùng để thiết lập chiều rộng cho phần tử kèm theo tính năng tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn.

Ví dụ, tôi có phần tử div1 thiết lập width:800px và phần tử div2 thiết lập max-width:800px

  • Nếu phần tử chứa phần tử div1 quá ngắn so với 800px thì phần tử chứa phần tử div1 sẽ tạo một thanh scroll nằm ngang.
  • Nếu phần tử chứa phần tử div2 quá ngắn so với 800px thì chiều rộng của phần tử div2 sẽ tự động rút ngắn lại sao cho nằm trọn bên trong phần tử chứa nó.
Ví dụ

<html>
    <head>
        <style type="text/css">
            .div1{
                border:3px solid green;
                width:800px;
            }
            .div2{
                border:3px solid blue;
                max-width:800px;
            }
        </style>
    </head>
    <body>
        <div class="div1">width:800px</div>
        <div class="div2">max-width:800px</div>
    </body>
</html>

Giá trị của thuộc tính max-width có thể xác định theo đơn vị: px, em, %, hoặc none (none tức là không thiết lập chiều rộng tối đa).

Lưu ý: Thuộc tính max-width sẽ ghi đè lên thuộc tính width.

Thuộc tính max-height

Thông thường, khi ta thiết lập chiều cao cho một phần tử, mặc cho phần nội dung của nó dài hay ngắn thì chiều cao của phần tử vẫn luôn không thay đổi (Xem ví dụ)

Từ đây, thuộc tính max-height dùng để thiết lập chiều cao cho phần tử kèm theo tính năng tự động rút thấp lại hoặc kéo cao ra phụ thuộc vào nội dung của phần tử (nhưng đương nhiên chiều cao của phần tử sẽ không vượt quá giá trị được thiết lập).

Ví dụ

.div1{
    height:150px;
}
.div2{
    max-height:150px;
}

Thuộc tính min-width

Thuộc tính min-width dùng để thiết lập chiều rộng cho phần tử tương tự như thuộc tính width, nó cũng sẽ tạo ra một thanh scroll nằm ngang nếu chiều rộng của phần tử chứa nó quá hẹp so với chiều rộng của nó.

Tuy nhiên, điểm khác nhau giữa hai thuộc tính này là:

  • Phần tử được thiết lập bởi thuộc tính width sẽ có chiều rộng mặc định
  • Phần tử được thiết lập bởi thuộc tính min-width sẽ có chiều rộng tối đa khi chiều rộng của phần tử chứa nó rộng hơn nó. Và chiều rộng của phần tử này sẽ thu hẹp lại bằng với giá trị được thiết lập khi chiều rộng của phần tử chứa nó trở nên hẹp hơn nó.
Ví dụ

<html>
    <head>
        <style type="text/css">
            .div1{
                border:3px solid green;
                width: 500px;
            }
            .div2{
                border:3px solid blue;
                min-width: 500px;
            }
        </style>
    </head>
    <body>
        <div class="div1">width: 500px</div>
        <div class="div2">min-width: 500px</div>
    </body>
</html>

Thuộc tính min-height

Thuộc tính min-height dùng để thiết lập chiều cao tối thiếu cho một phần tử. Nếu nội dung có phần tử đó quá cao thì chiều cao của phần tử sẽ tự động được tăng lên.

Ví dụ

div {
    min-height:100px;
}

Thuộc tính overflow

Thông thường, nếu kích thước phần nội dung của phần tử lớn hơn chiều rộng hoặc chiều cao của phần tử, thì nội dung đó sẽ bị tràn ra bên ngoài (Xem ví dụ)

Để khắc phục tình trạng này, ta có thể sử dụng thuộc tính overflow với giá trị auto (tự tạo thanh scroll cho phần tử đó) hoặc giá trị hidden (ẩn phần bị tràn)

Ví dụ

.div1{
    font-size:80px;
    border: 1px solid black;
    background-color: yellow;
    width: 200px;
    height: 200px;
    overflow: auto;
}
.div2{
    font-size:80px;
    border: 1px solid black;
    background-color: yellow;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

Thiết lập kích thước cho phần tử HTML bằng CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi