divタグのpaddingに注意

サラトガIT日記 > Web全般 > divタグのpaddingに注意 divタグのpaddingに注意

※実経験の記憶を頼りに自宅の PC 環境(VMWareなど)で再現している内容もあるのでご注意下さい

2008-12-02

 

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 ファイルにまとめるという方式を取っていますが、みなさんはどのようにコーディングしているのでしょうか。紙に書いて設計したりしているのでしょうか。身近なところにマークアップが得意な人がいると勉強になるのですけどね・・・。

関連記事

上記の記事に関連する記事(最新の10件)です。