CSS width 幅を指定するサンプル

CSSのwidthプロパティで、幅を指定するサンプルです。

目次

仕様 widthプロパティの仕様
サンプル 数値+pxを指定
  数値+%を指定
  autoを指定

widthプロパティの仕様

width : 値

widthプロパティは、幅を指定します。

説明
数値 + 単位   指定した単位で設定します。 
数値 + % 親ブロックに対する割合で設定します。
auto ブラウザが自動的に調整します。(初期値)
値を継承しない

初期値は、autoです。
以下はMDNのwidthプロパティのリンクです。 https://developer.mozilla.org/ja/docs/Web/CSS/width

数値+pxを指定

<style>
  .box1 {
    width: 200px; /* pxで指定 */
    background: LightCyan;
    border: 1px solid #000;
  }
</style>
<div class="box1">width:200px</div>

3行目は、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>

3行目は、widthに300pxを指定しています。
8行目は、widthに50%を指定しています。
親のブロックに対する割合になり、300pxの50%の150pxになります。

以下のイメージになります。

 

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>

3行目は、widthに300pxを指定しています。
8行目は、widthにautoを指定しています。
幅は、ブラウザが自動で指定します。確認した環境では、300pxでした。

以下のイメージになります。

関連の記事

CSS max-width 最大の幅を指定するサンプル
CSS min-width 最小の幅を指定するサンプル
CSS box-sizing paddingとborderの表示方法を指定
CSS padding 要素の内側の余白を指定する
CSS margin 要素の外側の余白を指定する

△上に戻る