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

Để thiết lập chiều rộng và chiều cao phần nội dung phần tử dùng thuộc tính widthheight chỉ ra giá trị rộng, cao theo đơn vị px, em ...

<style>
    div.exam1 {
        border: 5px solid green;
        width: 190px;
        height: 90px;
    }
</style>

<div class="exam1">
    Phần tử này có tổng chiều cao la 
    100px và tổng chiều rộng là 200.
</div> 
Phần tử này có tổng chiều cao la 100px và tổng chiều rộng là 200.

Xem lại phần về BOX CSS để biết xác định chiều cao, chiều rộng thực tế của box khi vẽ trong HTML

Ví dụ trên tổng chiều cao là 90px + 5px (viền) + 5px (viền) = 100px

Đơn vị phần trăm rộng, cao

Thuộc tính widthheight có thể được thiết lập bằng đơn vị phần trăm. Ví dụ sau chiều rộng theo phần trăm, chiều cao lại theo px

<style>
    div.measure {
        border: 5px solid green;
        width: 100%;
        height: 90px;
    }
</style>
<div class="measure">
    Tổng chiều rộng là <strong>100%</strong>
    và chiều cao là <strong>100px</strong> .
</div>
Tổng chiều rộng là 100% và chiều cao là 100px .

Khi thiết lập width là 100%, kích thước box sẽ tự thay đổi để vừa khít với phần tử chứa nó.

Chiều rộng, chiều cao lớn nhất nhỏ nhất

Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử (tức là phần tử tự co gian theo nội dung trong kích thước lớn nhất và nhỏ nhât).

  • min-width - độ rộng nhỏ nhất
  • min-height - chiều cao nhỏ
  • max-width - độ rộng lớn nhất
  • max-height - chiều cao lớn nhất
<style>
    p.first {
        border: 5px solid green;
        min-height: 100px;
    }
    p.second {
        border: 5px solid green;
        max-width: 100px;
    }
</style>

<p class="first">The <strong>minimum height </strong>
    of this paragraph is set to 100px.</p>
<p class="second">The<strong> maximum width </strong>
    of this paragraph is set to 100px.</p>

The minimum height of this paragraph is set to 100px.

The maximum width of this paragraph is set to 100px.

Đăng ký theo dõi ủng hộ kênh