目次
widthとは
widthは幅を指定します。
width : 値 |
値は以下を設定します。
数値 + 単位 | 要素の幅になります。単位はpx等です。 |
数値+% | 要素の幅になります。親ブロックに対する割合です。 |
auto | ブラウザが自動的に調整します。(初期値) |
数値+pxを指定
<style>
.box1 {
width: 200px; /* pxで指定 */
background: LightCyan;
border: 1px solid #000;
}
</style>
<div class="box1">width:200px</div>
widthに200pxを指定しています。
数値+%を指定
%は親のブロックに対する割合になります。
<style>
.box1 {
width: 300px;
border: 1px dotted #000;
background: LightCyan;
}
.box2 {
width: 50%; /* %で指定 */
border: 1px solid #000;
}
</style>
<div class="box1">
<div class="box2">width:50%</div>
</div>
親のwidthに300px、子のwidthに50%なので子のwidthは150pxになります。
autoを指定
autoはブラウザが自動で指定します。
<style>
.box1 {
width: 300px;
border: 1px dotted #000;
background: LightCyan;
}
.box2 {
width: auto; /* autoで指定 */
border: 1px solid #000;
}
</style>
<div class="box1">
<div class="box2">auto</div>
</div>
親のwidthに300px、子のwidthにautoを指定しました。幅は300pxでした。
関連の記事