margin,
padding
そして
border とは
これらはよくブログのカスタマイズによく使われるものですが、デザイン面で活躍したり、逆にデザイン壊しの素になったりします。
margin
特性
margin は border の外側に取られ、常に透明で、背景は適用されない。 (margin 部分に背景を指定することが出来ない)
ブラウザの余白
ブログでは滅多にないが、ウェブサイト作成では始終質問に挙がるものです。
「画像を左上ピッタリに付けたいが ‥‥」というもの。
margin: 0;
}
これを指定すると
この通り左上ピッタリになる。
margin はよく位置決めに使われたりする。 ブログで言うと、タイトル用画像の位置が margin: 0 0 10px 20px; で指定されていたりすると、中央に行かないのは当然となる。 この場合 20px と言うのが「左の余白」を示すことになるから。 中央にするためには「左右の余白」として auto を指定する。 auto というのは「自動」という意味で、「内容物に応じ」と言うことになる。
私はウェブサイトでも、またブログでも右に画像を置いて左にテキストというような配置をよく使う。
しかし何も指示しなければ、画像にくっつくほどにテキストが近づいてしまう。 もちろん読みにくいので、「これ以上近づくな」という意味の指示にもこの margin を使う。
上の場合はイメージタグに float: right と言うスタイル属性を与えて右寄せにしているだけなので、左や下に回り込んだテキストがくっついて読みにくいのがわかるでしょう。
しかし次のように指定すれば、このように画像とテキストの間に「余白」を設けることによって読みやすくなるのです。
<img src=" " alt=" " style="float: right; margin-left: 15px; margin-bottom: 15px">
チェコ語で「北」を意味します。