divタグのpaddingに注意

divタグのpaddingに注意

Web全般divタグのpaddingに注意

PC Web の仕事をしていると、開発者でも css をコーディングする機会は多くなりますが、やはり細かいところまで意識してコーディングできていないことに気付きました。このような場合は、リファレンスより、css の TIPS 的なネタの方が重宝します。

Permanent Link to 15 CSS Tricks That Must be Learned
[to-R]知っておきたい15個のCSS TIPS

TIPS ではなく、基本的なことなのかもしれませんが、div の width と padding-left、padding-right、border の幅が全部足されて算出されるのは知りませんでした。知らなかったというより、意識していなかったといったほうが正しいでしょうか。

#div {
  width: 200px;
  padding: 30px;
  border: 2px solid #000;
}

200 + 30 + 30 + 2 + 2 = 264px

コーディング中も、まずは style 要素を使ってブラウザで試して、うまくレイアウトできたら外部の css ファイルにまとめるという方式を取っていますが、みなさんはどのようにコーディングしているのでしょうか。紙に書いて設計したりしているのでしょうか。身近なところにマークアップが得意な人がいると勉強になるのですけどね・・・。

最終更新日:

関連記事

人気記事

新着情報