« #6 緋色の刻印 | トップページ | #187 世界遺産 熊野の森を守れ »

スタイルシート、margin と padding

スタイルシートの マージン(margin) と パディング(padding) の違いです。スタイルシートのclass と id と同じで前から気になってたことです。勉強結果。

基本的な話

margin : 外側
padding : 内側

です。何に対してか、って言うのが border(枠線、BOX) に対して外側か内側です。この辺の図は、とほほのスタイルシート入門に。

普通の場合、border は指定しないので見えません。なので、パッと見た時。どっちで指定しても差がないような気がしますが、実はいろいろあるみたいです。

細かいところ

背景色の問題。margin(外側)は、透明で反映されない。padding(内側)は、背景色が反映される。理にかなった動作ですね。だって、外側は関係ないですから。

マイナスの値。margin(外側)は、OK。padding(内側)はダメ。よく考えれば、分からないでもないです。内側の場合、枠線の位置が0です。で、マイナスを指定すると、枠線より外側へ行ってしまうので、もう内側とはいえなくなってしまいます。だから、マイナスはダメです。

複数の要素が縦に並んでいて、しかも、margin(外側)指定がされている時。合計じゃなくて、最大値がとられる。この辺の話、ややこいので良く分かりません。ボックス属性とか、参照。

ほとんどの場合、インライン要素には margin(外側)/padding(内側) とも指定は出来ない。よくよく考えれば、当たり前かもしれません。インライン要素で、余白の指定をしなきゃいけないような状況はないはずなのです。

ブロック要素とインライン要素

<address> や <blockquote> のように、ブラウザ表示時に前後に改行がはいるものがブロック要素、<big> や <strong> のように、前後に改行がはいらないものがインライン要素と覚えておくと覚え易いでしょう。

インライン要素って、文字の色変更したり、大きくしたり、下線引いたりとかに使うものなので、余白がどうこうと言う話にはならないはずです。タブン。

で、結局・・・

ここまで分かったところで、実際どうすりゃいいのか。です。

引用文とかで、左側を空けたい時

margin-left:5em;

paddingじゃなく、marginが正しいはず。

テーブルの枠線から文字を離す

<td style="padding:5px;">

枠線と文字が引っ付きすぎて見にくいとき、paddingで指定します。

P要素で改行しない

<P style="margin:0px;">

で、改行させたくないP要素と、その前後のP要素に指定する。か、

p { margin: 0px; }

で、全体を改行させなくして、改行したい時は、BRを入れる。

1つのP要素にだけ指定しても、想定どおりになりません。理由は、マージンの圧縮 とか。

|

« #6 緋色の刻印 | トップページ | #187 世界遺産 熊野の森を守れ »

「Web」カテゴリの記事

「パソコン・インターネット」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/44406/1557192

この記事へのトラックバック一覧です: スタイルシート、margin と padding:

« #6 緋色の刻印 | トップページ | #187 世界遺産 熊野の森を守れ »