CSSにおけるマージンの相殺の規則
CSSにおいてマージンの相殺される際の基本的な規則は下記の通り： 水平方向（左右）のマージンは相殺されない（マージンの相殺が行われるのは垂直方向のみ）。 パディング、ボーダーによって分離されず隣接するマージンにおいては、親ボックスとの間でも相殺が生じる。 floatされたボックスマージンは相殺されない。 overflow属性の値に"visible"以外が指定された要素は、その子要素とのあいだでマージンを相殺しない。 絶対配置（position:absolute;）されたボックスのマージンは相殺されない。 inline-block要素（display:inline-block;と指定されたボックス）のマージンは相殺されない。 クリアランスが与えられた要素の上のマージンは相殺されない。 ルート要素のマージンは相殺されない。 隣接するマージンがすべて正の値の場合は、もっとも大きいマージンの値が適
【CSS】floatを使わずtable-cellを使って横並びにする方法 - ディレイマニア
目次 6回に渡る短期連載記事です。明日以降の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 ←今回はこれ 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 table-cellを使って横並びにするメリット 要素を横並びにしたいとき、floatを使ったり、display: inline-bloc
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
