Kích thước rộng cao phần tử HTML trong CSS

Chiều rộng và chiều cao box với thuộc tính width và height

Tùy thuộc vào thuộc tính box-resize của phần tử, mà thuộc tính with và height tương ứng với chiều rộng cao của phần tử hay chiều rộng cao của phần content của phần tử.

• Nếu box-resize có giá trị content-box:
  Thì thuộc tính width và height là chiều rộng và cao của riêng phần content (không gồm padding, border, margin).
• Nếu box-resize có giá trị border-box:
  Thì thuộc tính width và height là tổng chiều rộng và tổng cao của phần tử (gồm content, padding, border, margin).

Cú pháp:

width:  <length> | <percentage> | auto;
height: <length> | <percentage> | auto;

Chiều rộng width và cao height có thể nhận giá trị là chiều dài (tham khảo đơn vị chiều dài CSS ), phần trăm (chiếm bao nhiêu phần trăm không gian của phần tử chứa) hoặc auto do browser tính toán trên cơ sở dàn phần tử theo quy tắc mặc định.

Ví dụ 1) Thiết lập chiều rộng 190px và cao là 90px, khi box-sizing là border-box và content-box (mặc định)

<style>
    .exam1 {
        box-sizing: border-box;
        border: 5px solid green;
        width: 190px;
        height: 120px;
    }
    .exam2 {
        box-sizing: content-box;
        border: 5px solid red;
        width: 190px;
        height: 120px;
    }
</style>

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

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

width và height với giá trị phần trăm

Thuộc tính width và height có thể được thiết lập bằng đơn vị phần trăm %, cho biết kích thước chiếm bao nhiều % phần content của phần tử cha. Ví dụ sau chiều rộng theo phần trăm, chiều cao lại theo px

<style>
    .contain-element {
        box-sizing: border-box;
        height: 220px;
        width:  420px;
        border: 10px solid green;
    }
    .test-element {
        box-sizing: border-box;
        border: 1px solid red;
        width: 50%;
        height: 100px;
    }
</style>
<div class="contain-element">
    <div class="test-element">
        Tổng chiều rộng là <strong>50%</strong> của phần content phần tử cha = 200px;
        và chiều cao là <strong>100px</strong> .
    </div>
</div>

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.