CSS 尺寸 (Dimension) · W3School HTML & CSS 教程

# CSS 尺寸 (Dimension) **CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。** ## CSS 尺寸實例： [使用像素值設置圖像的高度](/tiy/t.asp?f=csse_dim_height) ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 160px } img.small { height: 30px } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比設置圖像的高度](/tiy/t.asp?f=csse_dim_height_percent) ``` <html> <head> <style type="text/css"> img.normal { height: auto } img.big { height: 50% } img.small { height: 10% } </style> </head> <body> <img class="normal" src="/i/eg_smile.gif" /> <br /> <img class="big" src="/i/eg_smile.gif" /> <br /> <img class="small" src="/i/eg_smile.gif" /> </body> </html> ``` [使用像素值來設置元素的寬度](/tiy/t.asp?f=csse_dim_width) ``` <html> <head> <style type="text/css"> img { width: 300px } </style> </head> <body> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比來設置元素的寬度](/tiy/t.asp?f=csse_dim_width_percent) ``` <html> <head> <style type="text/css"> img { width: 50% } </style> </head> <body> <img src="/i/eg_smile.gif" /> </body> </html> ``` [設置元素的最大高度](/tiy/t.asp?f=csse_dim_max-height) ``` <html> <head> <style type="text/css"> p { max-height: 10px } </style> </head> <body> <p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用像素值來設置元素的最大寬度](/tiy/t.asp?f=csse_dim_max-width) ``` <html> <head> <style type="text/css"> p { max-width: 300px } </style> </head> <body> <p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p> </body> </html> ``` [使用百分比來設置元素的最大寬度](/tiy/t.asp?f=csse_dim_max-width_percent) ``` <html> <head> <style type="text/css"> p { max-width: 50% } </style> </head> <body> <p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p> </body> </html> ``` [使用像素值來設置元素的最小高度](/tiy/t.asp?f=csse_dim_min-height) ``` <html> <head> <style type="text/css"> p { min-height: 100px } </style> </head> <body> <p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用像素值來設置元素的最小寬度](/tiy/t.asp?f=csse_dim_min-width) ``` <html> <head> <style type="text/css"> p { min-width: 1000px } </style> </head> <body> <p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比來設置元素的最小寬度](/tiy/t.asp?f=csse_dim_min-width_percent) ``` <html> <head> <style type="text/css"> p { min-width: 200% } </style> </head> <body> <p>這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p> <img src="/i/eg_smile.gif" /> </body> </html> ``` [使用百分比設置行間距](/tiy/t.asp?f=csse_dim_line-height_percent) ``` <html> <head> <style type="text/css"> p.small {line-height: 90%} p.big {line-height: 200%} </style> </head> <body> <p> 這是擁有標準行高的段落。在大多數瀏覽器中默認行高大約是 110% 到 120%。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。 </p> <p class="small"> 這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。 </p> <p class="big"> 這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。 </p> </body> </html> ``` [使用像素值設置行間距](/tiy/t.asp?f=csse_dim_line-height_pixel) ``` <html> <head> <style type="text/css"> p.small { line-height: 10px } p.big { line-height: 30px } </style> </head> <body> <p> 這是擁有標準行高的段落。在大多數瀏覽器中默認行高大約是 20px。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。 </p> <p class="small"> 這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。 </p> <p class="big"> 這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。 </p> </body> </html> ``` [使用數值來設置行間距](/tiy/t.asp?f=csse_dim_line-height_number) ``` <html> <head> <style type="text/css"> p.small { line-height: 0.5 } p.big { line-height: 2 } </style> </head> <body> <p> 這是擁有標準行高的段落。默認行高大約是 1。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。這是擁有標準行高的段落。 </p> <p class="small"> 這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。這個段落擁有更小的行高。 </p> <p class="big"> 這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。 </p> </body> </html> ``` ## CSS 尺寸屬性 CSS 尺寸屬性允許你控制元素的高度和寬度。同樣，還允許你增加行間距。 | 屬性 | 描述 | | --- | --- | | [height](/cssref/pr_dim_height.asp) | 設置元素的高度。 | | [line-height](/cssref/pr_dim_line-height.asp) | 設置行高。 | | [max-height](/cssref/pr_dim_max-height.asp) | 設置元素的最大高度。 | | [max-width](/cssref/pr_dim_max-width.asp) | 設置元素的最大寬度。 | | [min-height](/cssref/pr_dim_min-height.asp) | 設置元素的最小高度。 | | [min-width](/cssref/pr_dim_min-width.asp) | 設置元素的最小寬度。 | | [width](/cssref/pr_dim_width.asp) | 設置元素的寬度。 |