Chiều rộng và chiều cao

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 37 trên 76.

Trong CSS, các thuộc tính width và height dùng để đặt kích thước vùng nội dung của một phần tử. Những thuộc tính này rất cần thiết để kiểm soát kích thước và bố cục của các phần tử trên trang web của bạn.

Đây là cú pháp cơ bản để sử dụng thuộc tính width và height:

selector {
    width: value;
    height: value;
}

width: Chiều rộng vùng nội dung của phần tử.

height: Chiều cao vùng nội dung của phần tử.

value: Giá trị chiều rộng hoặc chiều cao mong muốn, có thể được chỉ định bằng pixel (px), em (em), phần trăm (%) hoặc các đơn vị CSS hợp lệ khác. Bạn cũng có thể dùng từ khóa auto để trình duyệt tự động tính chiều rộng hoặc chiều cao dựa trên nội dung.

Ví dụ:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Trong ví dụ này, tất cả phần tử <div> có chiều rộng 300px và chiều cao 200px, còn tất cả phần tử <img> có chiều rộng bằng 100% chiều rộng của phần tử cha và chiều cao được tự động tính để giữ nguyên tỷ lệ khung hình.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có phần tử chia (<div>) và một hình ảnh (<img>). Nhiệm vụ của bạn là dùng thuộc tính width và height để đặt kích thước cho các phần tử này. Hãy làm theo các bước dưới đây:

Viết quy tắc CSS nhắm đến phần tử <div>. Đặt width thành 400px và height thành 250px.
Viết quy tắc CSS nhắm đến phần tử <img>. Đặt width thành 300px và height thành auto.

Tự làm thử

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>