HTML&CSS

リストの余白の正体

最近の標準ブラウザではリスト要素のパディングはul要素に40pxデフォルトで設定されている場合が多いようです。IE7以前はliのマージンで設定されています。 aaaaa ul[id]{ background-color: #FFC; padding-left: 40px; } li { backgr  >>続きを読む

インライン要素のソース中での改行の問題

インライン要素の途中で改行を行うと半角スペースが入ります。 以下の文章で「名前は」で改行したとします。 <p>吾輩(わがはい)は猫である。名前は まだ無い。どこで生れたかとんと見当(けんとう)がつかぬ。</p> 吾輩(わがはい)は猫である。名前は まだ無い。どこで生れたかとん  >>続きを読む

マージンについて考える2〜相殺

marginの相殺 通常フローでmargin同士が重なった場合に相殺が起こります。相殺は、数値の大きい方が適用されます。ただし、水平方向(横方向)のマージンは相殺されません。 marginの相殺のサンプル 相殺は入れ子の状態でも、marginが重なれば発生します。 親と子ともにmarginが設定され  >>続きを読む

マージンについて考える 1〜margin-auto

マージンの挙動をしっかり理解できるとレイアウトをコーディングすることが楽になります。 ここではmargin:autoについて考えてみたいと思います。 margin:autoといえば、ブロック要素の中央揃えね。となりますが、少し掘り下げてみましょう。 通常フローのブロックレベル要素で各マージンの 値を  >>続きを読む

ボックスモデルについて考える CSS

(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。 ボックスモデルは上図のようなcontent(内容領域)、padding、border、marginの4つの領域で構成されています。 内容領域 要素ツリーの内容自身にあたります。テキストや画像などです。 たとえば  >>続きを読む

HTML リスト作成時の注意

リスト作成のとき、<ul>と<li>の間に全角のスペースが存在するとマージンの設定がおかしくなります。不要なマージンがついてしまいます。 見つけにくいエラーですから十分気をつけましょう。 たとえばこんな感じです。(□は全角スペースのつもり) *これは間違いの例です。 <ul>  >>続きを読む

画像を囲むボーダーの余計な空白

写真の下になぜかこんな空白が空いたらどうしますか? 解決方法はこれです。 vertical-align:bottom;をimgタグに指定します。 ブロック要素の中で画像を表示して、そのブロック要素にボーダーを設定すると下側にわずかな隙間ができます。 例えばdivの中にimgで画像表示しdivにボーダ  >>続きを読む

line-heightの単位について

line-heightについて line-heightプロパティは、行の高さを指定する時に使用します。 line-heightとは、 例えばfont-sizeを10pxとしてline-heightを20pxに設定します。 行の高さ20pxからフォントサイズ10pxを引いた残りの10pxが、行間として  >>続きを読む