タグ margin-bottom
人気順 10 users 50 users 100 users 500 users 1000 users垂直方向のマージンにはmargin-topを優先的に使う理由 - Yuhei Yasuda
margin-bottomではなくmargin-topを使う派である旨をツイートしたら理由を尋ねられたので、それに対する回答です。大きくは次の3つです。 末尾の要素の存在が任意である場合が多いため Stackレイアウトとの取り合わせやすさのため 隣接セレクターを使った場合分けができるようにするため CSS、基本コンポーネントの上に... 続きを読む
CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説 | コリス
Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spa... 続きを読む
[CSS]マージンの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック | コリス
まずは、クイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか? What's the Deal with Collapsible Margins? これは「マージンの相殺(Collapsing Margins)」と呼ばれるものです。 このマージンの相殺と... 続きを読む
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
2015-06-26 コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ ブログ ブログ-カスタマイズ text-small">◯◯</span>」の部分を消去してください。 その後下のコードをコピペです。 .follow-btn{ width: 100%; text-align: left; margin-bottom: 10px; } .follow-btn a { disp... 続きを読む
clearfix のアレンジ版作ってみました | understandard
Firefox 3.6 が clearfix の影響で margin-bottom が margin-top にもかかるという話を聞いて、普段使ってた clearfix で試してみたところ、同様の現象が出たので、対応版を作ってみました。 ネタ元の記事は以下。 firefoxでmargin-bottomがmargin-top | 乱雑モックアップ この記事で紹介されていた clearfix は以下よ... 続きを読む
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指... 続きを読む
IE 6.0 - memo.xight.org - Clean CSS - CSSの最適化,ファイルサイズ削減ツール
- Summary テキストフィールドにCSSを入力するか,CSSが置いてあるURLを指定して,"Process CSS" をクリック. - 使用前 (196byte) #example { color: rgb(0,0,0); background-color: #ffffff; font-weight: bold; margin-top: 5px; margin-bottom: 5px; ma... 続きを読む