Tips

通常フローについて サンプル HTMLソース ABCDの各ボックスはすべて同じ条件のdivで囲まれたテキストです。現在は通常フローで綺麗に並んでいます。ボックスＢだけはこれからフロートさせますので背景色を変えています。...

インライン要素の途中で改行を行うと半角スペースが入ります。 以下の文章で「名前は」で改行したとします。 吾輩（わがはい）は猫である。名前は まだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。 「名前は」の後に半角のス...

marginの相殺 通常フローでmargin同士が重なった場合に相殺が起こります。相殺は、数値の大きい方が適用されます。ただし、水平方向（横方向）のマージンは相殺されません。 marginの相殺のサンプル 相殺は入れ子の状態で...

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

(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。 ボックスモデルは上図のようなcontent(内容領域）、padding、border、marginの４つの領域で構成されています。 内容領...

マージンの相殺について 上下のマージンは相殺される仕組みになっています。相殺によって、少ない方の数値が打ち消されます。 次のような例を考えてみましょう。 CSSの設定 HTMLの設定 上の例では最初...

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