css - 効かない - マージン web




CSSでマージンとパディングを使用する場合 (12)

CSSを書くときに、 marginをいつ使うべきか、 paddingをいつ使うべきかを決める際に使うべき特別なルールやガイドラインがありpaddingか?


マージン

マージンは通常、エレメント自体とそのサラウンドの間にスペースを作成するために使用されます。

たとえば、画面の端に貼り付けるためにナビゲーションバーを作成するときや、白い隙間がないときに使用します。

パディング

私は通常、境界線、 <div>などの中に要素があるときに使用しますが、サイズを小さくしたいときは、その周りの他の要素の間に距離や余白を残したいと考えています。

それで簡単に、それは状況です。 それはあなたがしようとしていることに依存します。


マージンとパディングを使用する場合

要素の周りにスペースを作成するには、マージンとパディングの2つの方法があります。ほとんどの使用シナリオでは、機能的には同じですが、実際には若干異なる方法で動作します。 マージンとパディングの間には、ページの周りの要素を移動するために使用するものを選択する際に考慮する必要がある重要な違いがあります。 しかし、マージンやパディングのいずれかを同じエフェクトに使用できるケースでは、多くの決定が個人の好みになります。

マージンを使用する場合

  1. ボーダープロパティで作成された「ボックス」の外側にスペースを表示する必要があります。 余白は枠の外側にあるため、境界を1か所にとどめたい場合は余白を使用します。 これは、たとえば、メインコンテンツエリアから移動したい境界線を持つサイドバーがある場合に便利です。

  2. あなたの背景色やイメージがあなたの個人的な空間に侵入することは望ましくありません。 背景色とイメージは境界線で止まるので、作成しているスペースの外に背景を残しておきたい場合は、余白が必要なプロパティです。

  3. 要素の上下に折りたたみ可能なスペースが必要です。 2つのマージンが互いの上にある場合、マージンが最大マージンのサイズに縮小するという点で、上下のマージンはサイドマージンとは異なる動作をします。 たとえば、段落を20ピクセル、下限を15ピクセルに設定すると、パラグラフ間に20ピクセルのスペースしかない(2つのマージンが互いに崩壊し、最大のものが出てくる) 。

パディングを使用する場合

  1. 作成しているすべてのスペースを境界内に収めたいと思っています。 パディングはあなたの国境の中に含まれているので、あなたの要素の中のコンテンツからあなたのボーダーを押し離すのに便利です。

  2. あなたが作成しているスペースにあなたの背景色/イメージが必要です。 あなたの背景はあなたのパディングの後ろに続くので、あなたの背景を覗き見したい場合にのみそれを使用してください。

  3. あなたは上部と下部の空間がより堅固に動作するようにします。 たとえば、文書内の段落を20ピクセル、下端を15ピクセルに設定した場合、行内に2つの段落がある場合は、合計で35ピクセルのスペースが必要になりますそれらの間の。


marginpadding違いを知ることは良いことです。 ここにいくつかの違いがあります:

  • マージンは要素の外側空間であり、パディングは要素の内部空間です。
  • マージンは要素の境界線の外側のスペースですが、パディングは境界線の内側のスペースです。
  • Marginはauto: margin: autoの値を受け取りますが、Paddingをautoに設定することはできません。
  • 余白は任意の数値に設定できますが、余白は負でない必要があります。
  • 要素をスタイルすると、余白には適用されません(背景色など)。

TL; DR: デフォルトでは、ボーダーや背景がある場合を除き、どこにでもマージンを使用し、その可視ボックス内のスペースを増やしたいとします。

私には、パディングとマージンの最大の違いは、 垂直マージンは自動崩壊で、パディングはそうではないということです。 1emのパディングを持つ2つの要素をそれぞれ1つずつ上に考えてみましょう。 このパディングは要素の一部とみなされ、常に保持されます。 したがって、最初の要素の内容に続いて、最初の要素の埋め込み、2番目の要素の埋め込み、2番目の要素の内容が続きます。 したがって、2つの要素の内容は2em離れてしまうことになります。

そのパディングを1emマージンに置き換えてください。 マージンは要素の外側にあるとみなされ、隣接するアイテムのマージンが重なります。 したがって、この例では、最初の要素の内容に続いて、結合余白の1emとそれに続く2番目の要素の内容が続きます。 したがって、2つの要素の内容は1emだけ離れています。

これは、要素の周りに何の要素があるかにかかわらず、要素の周りに1emと言うことを知っていることを知っているときに本当に便利です。

他の2つの大きな違いは、パディングがクリック領域と背景色/画像に含まれていてマージンには含まれていないことです。


高度なマージンとパディングの説明

要素内のコンテンツのスペースをpaddingためにpaddingを使用することは不適切です。 代わりに子要素の marginを使用する必要あります。 Internet Explorerなどの古いブラウザは、 Internet Explorer 4で完全に動作するmarginを使用する場合を除いて、ボックスモデルを誤解していました。

paddingを使用するの適切な場合は、次の2つの例外があります。

  1. これは、入力要素などの子要素を含むことができないインライン要素に適用されます。

  2. Mozilla * Cough *が修正することを拒否し、W3CとWHATWGの編集者と定期的に交換する程度まで)、あなたが実用的な解決策とこの解決策を持たなければならない非常に雑多なブラウザのバグを補いますあなたが補償しているバグ以外のスタイリングには影響しません。

padding: 50px;付きの100%幅の要素がある場合padding: 50px; 効果的にwidth: calc(100% + 100px);取得しwidth: calc(100% + 100px);marginwidthに追加されないので、要素上で直接paddingするのではなく、 child elementsmarginを使用すると予期しないレイアウトの問題が発生することはありません。

だからこそ2つのうちの1つをやっていないのであれば、エレメントにパディングを追加するのではなくすべてのブラウザーで期待される動作を確実に得るために直接的な子/子エレメントにしてください。


ここでは、 paddingmarginクリック性と背景の塗りつぶしにどのように影響するかを示すHTMLがあります。 オブジェクトはパディングにクリックを受け取りますが、オブジェクトのマージン領域をクリックするとその親に移動します。

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});
.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>


マージンはブロック要素の外側にあり、パディングは内側にあります。

  • マージンを使用してブロックを外のものから分離する
  • パディングを使用して、ブロックの端からコンテンツを移動します。


マージンは要素の周りの領域(境界線の外側)をクリアしますが、パディングは要素の境界線の内側の領域をクリアします。

あなたの要素が外側のマージンを知らないことを意味します。動的なWebコントロールを開発している場合、可能であれば、パディングとマージンを使用することをお勧めします。

マージンを使用する必要があることに注意してください。


最初に、相違点と各責任の内容を見てみましょう。

1)マージン

CSS marginプロパティは、要素の周囲にスペースを生成するために使用されます。
マージンのプロパティは、境界線の外側の空白のサイズを設定します。 CSSでは、マージンを完全に制御できます。
要素の各辺のマージン(上、右、下、左)を設定するためのCSSプロパティがあります。


2)パディング

CSSパディングプロパティは、コンテンツの周囲にスペースを生成するために使用されます。
パディングは、要素の境界線の内側の領域をクリアします。
CSSでは、パディングを完全に制御できます。 要素の各辺のパディング(上、右、下、左)を設定するためのCSSプロパティがあります。

つまり、 余白は要素の周りのスペースですが、 パディングは要素の一部であるコンテンツの周りのスペースです。

codemancersこのイメージは、マージンとボーダーがどのようになって、どのようにボーダーボックスとコンテンツボックスが違うのかを示しています。

また、以下のように各セクションを定義します。

  • コンテンツ - これは、テキスト、画像、または他の要素のような実際のコンテンツが存在するボックスのコンテンツ領域を定義します。
  • パディング - これは、メインのコンテンツを含むボックスからクリアします。
  • 境界線 - コンテンツとパディングの両方を囲みます。
  • マージン - この領域は、他の要素と区別する透明な領域を定義します。

注目すべきことは、自動折りたたみマージンがあなたを悩ます(そしてあなたの要素に背景色を使用していない)とき、パディングを使う方が簡単なことです。


私がこれを例、図、さらには「自分で試してみてください」という説明でこれを説明した最高のものがhereありhere

下の図は、その違いを瞬時に視覚的に理解していると思います。

標準に準拠したブラウザ( IEの癖は例外です )は、コンテンツ部分のみを所定の幅にレンダリングすることを覚えておいてください。レイアウトの計算でこれを把握してください。 また、ボーダーボックスは、それをサポートするブートストラップ3で復帰しているのを見ています。


私はいつもこの原則を使用します:

これは、Firefoxのinspect要素機能のボックスモデルです。 それはタマネギのように機能します:

  • あなたのコンテンツは真ん中にあります。
  • パディングは、コンテンツと内部のタグの端の間のスペースです。
  • ボーダーとその仕様
  • マージンはタグの周囲のスペースです。

したがって、マージンが大きくなると、コンテンツを含むボックスの周りにスペースが広がります。

パディングが大きくなると、コンテンツとその内側にあるボックスとの間のスペースが増加します。

特定の値に設定されている場合、どちらもボックスのサイズを増減しません。





margin