サンプル - Microsoft Internet Explorer |
この段落の横幅は、100pxで高さは、100pxです。 この段落の横幅は、200pxで高さは、100pxです。 |
widthプロパティでボックスの横幅を、heightプロパティでボックスの高さをそれぞれ指定することが出来ます。
HTMLでテーブルや画像の大きさを指定する場合に、width属性やheight属性を使いましたが、この場合と同じようにこのプロパティはボックスの大きさを指定することが出来ます。
大きさを具体的に設定する値には、数値にpxなどの単位をつけて指定するほか、パーセントや、キーワードのautoで指定します。
サンプル - Microsoft Internet Explorer |
この段落の横幅は、100pxで高さは、100pxです。 この段落の横幅は、200pxで高さは、100pxです。 |
<html> <head> <title>サンプル</title> <style type="text/css"> <!-- p {background-color:orange;} .test1 { width:100px ; height:100px; } .test2 { width:100px; height:200px; } --> </style> </head> <body> <p class="test1"> この段落の横幅は、100pxで 高さは、100pxです。 </p> <hr> <p class="test2"> この段落の横幅は、200pxで 高さは、100pxです。 </p> </body> </html>