HTML&CSS

【CSS】calcが効かない!ちゃんとスペース入れてる?【デイトラDAY10】

(落ち着いたら清書する)

デイトラDAY10:横並びカードのコーディング で、calcを使ったwidthの設定を練習していた時のことです。

「手入力だと反映されないのに、お手本のコードをコピペしたら反映される」

という事態に陥り、数十分ほどハマったのでメモ。

●手入力:反映されないCSS
width: calc(33%-24px*2/3);

●お手本のコード:反映されるCSS
width: calc(33% – 24px * 2 / 3);

目を皿のようにして何度見返してみても、スペルミスは見つからなかったのですが…。

なんと、お手本と同じ用に半角スペースを入れてみたら、あっさり反映されました (T_T)

CSS書くとき、スペースの有無ってそんなに気にしてなかったけど、演算子を使う時は注意した方が良さそうです。

※どうやら「+」と「-」はスペース必須、「*」「/」はスペースあってもなくても大丈夫みたいですが、どっちがどっちって使い分けるより、全部スペースありにしちゃった方が楽かも… 笑

【こちらの記事を参考にさせていただきました】calc()が効かない?: 中の演算子の間にはスペースが必要です