やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

幅指定

cssで幅を指定するときに実はブラウザによって解釈が違っている。HTMLを組むときにXHTMLで組むと基本的に解釈が統一されるらしいとか(?)
XHTMLというのは今後HTMLから移行されるはずのマークアップ言語で全てのブラウザでHTMLと動揺にブラウザは解釈してくれます。何が違うかというとHTMLが適当でもよかったものがXHTMLのほうがより厳格なHTMLの作り方になります。
HTMLタグは開始タグと終了タグの<font></font>のような形と<br>のように開始タグのみで終了タグのないタグも存在していますが、XHTMLでは必ず開始タグと終了タグが必要になります。なので<br></br>または<br />の用な形式で記述をします。指定忘れたからといって表示されないわけではないんですが;;;で、
しまった道がそれた;
XHTML文書でのCSSで横幅を指定のケース
で肝心のCSSで横幅を指定するときそのブロックに余白をつけたい時に横300pxに魅せたいボックスで左右10px余白を付けて文章を280pxの幅で表示しようというときにはその余白の幅を抜いて横幅指定する必要があります。

.left{
width:280px;
padding-left:10px;
padding-right:10px;
}

のように指定。ブラウザごとに幅の指定が違いは感じられなかった。(スクリーンショットで横幅数値確認済み)

で、よく各ボックスやテーブルにCSSで線を引くことがあります。これも、罫線幅がボックス自体の幅に含まれますので横300pxに魅せたいボックスにボーダーを付けるときにボーダー幅を考慮する必要があります。横幅左右に1px引くのならば

.left{
width:298px;
border:1px solid #ccc;
}

ボーダー線分横幅から引きます
これに余白が入るとさらに面倒でボーダー1pxに余白10px必要となると計算して・・・278pxこれがwidthに指定する幅になるというものです。
面倒です><。。。。。。
じゃぁマージンという手もありますがたくさんマージン使うと自分はレイアウトが崩れやすいような気がしますのであんまり使ってません(自分がわかってないだけだと思われるけど)