CSS-寸法

つまり、すべてのボックスを囲む境界線を見ました。要素、各ボックス内に表示できるパディング、およびそれらの周囲に配置できるマージン。このチュートリアルでは、ボックスの寸法を変更する方法を学びます。

ボックスの寸法を制御できる次のプロパティがあります。

height プロパティは、ボックスの高さを設定するために使用されます。
width プロパティは、ボックスの幅を設定するために使用されます。
line-height プロパティは、テキストの行の高さを設定するために使用されます。
max-height プロパティは、ボックスの最大高さを設定するために使用されます。
min-height プロパティは、ボックスの最小高さを設定するために使用されます。
max-width プロパティは、ボックスの最大幅を設定するために使用されます。
min-width プロパティは、ボックスの最小幅を設定するために使用されます。

高さと幅のプロパティ

_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>

それは次の結果を生成します-

line-heightプロパティ

_line-height_プロパティを使用すると、テキストの行間のスペースを増やすことができます。 line-heightプロパティの値は、数値、長さ、またはパーセンテージです。

ここに例があります-

<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>

それは次の結果を生成します-

max-heightプロパティ

_max-height_プロパティを使用すると、ボックスの最大高さを指定できます。 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>

それは次の結果を生成します-

min-heightプロパティ

_min-height_プロパティを使用すると、ボックスの最小の高さを指定できます。 min-heightプロパティの値は、数値、長さ、またはパーセンテージです。

注-このプロパティは、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>

それは次の結果を生成します-

max-widthプロパティ

_max-width_プロパティを使用すると、ボックスの最大幅を指定できます。 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>

これにより、次の結果が生成されます–

min-widthプロパティ

_min-width_プロパティを使用すると、ボックスの最小幅を指定できます。 min-widthプロパティの値は、数値、長さ、またはパーセンテージです。

注-このプロパティは、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>

それは次の結果を生成します-

Css-dimension

CSS-寸法

高さと幅のプロパティ

line-heightプロパティ

max-heightプロパティ

min-heightプロパティ

max-widthプロパティ

min-widthプロパティ

目次