【CSS】width:calc()で横幅を指定すると便利

コーディング
スポンサーリンク

calc()の使い方

calc()の中に計算式をかくだけです。
+(プラス), -(マイナス), *(掛ける), /(割る)の記号を使って表記します。

widthの幅を指定するときによく使われます。
例えば・・・

width: calc(100% - 50px);

と書くことで、全幅100%から50px分引いた分の長さがwidthの幅になります。

 

要素間に均等に余白を入れたい

See the Pen
QWEerpY
by nzm (@nzm)
on CodePen.

現在はボックスの幅を33%と指定しているので、全幅100%からそれぞれ33%を引いた残りの1%が各ボックスの間に余白として細ーく入っています。
このボックス間に、特定のサイズの余白を入れたいと思います。

 

width:calc()で余白を計算

See the Pen
pobMVPX
by nzm (@nzm)
on CodePen.

width: calc((100% / 3) - 30px)

で、全幅100%から÷3で三等分→余白分30pxを引いて→ボックスの間に30pxの余白が追加 されるようにしました。

 

余白を入れない場合は

width: calc(100% / 3);

と書くと100%を3でピッタリ割ろうとするので余白なく均等に並びます。

 

このようにcalc()を使うことで、自分で計算する必要がなくとても便利ですね。

コメント

タイトルとURLをコピーしました