(落ち着いたら清書する)
デイトラDAY10:横並びカードのコーディング で、calcを使ったwidthの設定を練習していた時のことです。
「手入力だと反映されないのに、お手本のコードをコピペしたら反映される」
という事態に陥り、数十分ほどハマったのでメモ。
●手入力:反映されないCSS
width: calc(33%-24px*2/3);
●お手本のコード:反映されるCSS
width: calc(33% – 24px * 2 / 3);
目を皿のようにして何度見返してみても、スペルミスは見つからなかったのですが…。
なんと、お手本と同じ用に半角スペースを入れてみたら、あっさり反映されました (T_T)
CSS書くとき、スペースの有無ってそんなに気にしてなかったけど、演算子を使う時は注意した方が良さそうです。
※どうやら「+」と「-」はスペース必須、「*」「/」はスペースあってもなくても大丈夫みたいですが、どっちがどっちって使い分けるより、全部スペースありにしちゃった方が楽かも… 笑
【こちらの記事を参考にさせていただきました】calc()が効かない?: 中の演算子の間にはスペースが必要です