您已經看到了包圍每個框（即元素）的邊框、可以出現在每個框內的填充以及可以圍繞它們的邊距。在本教程中，我們將學習如何更改框的尺寸。
我們有以下屬性，允許您控制框的尺寸。
height屬性用於設置框的高度。
width屬性用於設置框的寬度。
行高屬性用於設置文本行的高度。
max height屬性用於設置框可以達到的最大高度。
最小高度屬性用於設置框可以達到的最小高度。
max width屬性用於設置框的最大寬度。
min width屬性用於設置框的最小寬度。
The Height and Width Properties
height和width屬性允許您設置框的高度和寬度。它們可以採用長度、百分比或關鍵字auto的值。
下面是一個例子;
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>
它將產生以下結果&負;
The line-height Property
行高屬性允許您增加文本行之間的間距。「行高」屬性的值可以是數字、長度或百分比。
下面是一個例子;
<html>
<head>
</head>
<body>
<p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
</p>
</body>
</html>
它將產生以下結果&負;
The max-height Property
max height屬性允許您指定框的最大高度。「最大高度」屬性的值可以是數字、長度或百分比。
注意−此屬性在Netscape 7或IE 6中都不起作用。
下面是一個例子;
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
</body>
</html>
它將產生以下結果&負;
The min-height Property
最小高度屬性允許您指定框的最小高度。「最小高度」屬性的值可以是數字、長度或百分比。
注意−此屬性在Netscape 7或IE 6中都不起作用。
下面是一個例子;
<html>
<head>
</head>
<body>
<p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
</body>
</html>
它將產生以下結果&負;
The max-width Property
max width屬性允許您指定框的最大寬度。「最大寬度」屬性的值可以是數字、長度或百分比。
注意−此屬性在Netscape 7或IE 6中都不起作用。
下面是一個例子;
<html>
<head>
</head>
<body>
<p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
</body>
</html>
這將產生以下結果&負;
The min-width Property
最小寬度屬性允許您指定框的最小寬度。「最小寬度」屬性的值可以是數字、長度或百分比。
注意−此屬性在Netscape 7或IE 6中都不起作用。
下面是一個例子;
<html>
<head>
</head>
<body>
<p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
</body>
</html>
它將產生以下結果&負;