マージンとパディングの違いは？

372

CSSのマージンとパディングの違いは何ですか？それは本当に多くの目的を果たしていないようです。違いがどこにあるのか（そしてなぜ違いを知ることが重要であるのか）の例を教えていただけませんか？

css 
— マクロニア語
ソース
14
stackoverflow.com/questions/2189452/... stackoverflow.com/questions/3060456/... stackoverflow.com/questions/4619899/...検索からの最初の3つのリンクpadding vs margin。矢印を検索バーに追加して緑色にする必要があると思います。
— ライム、
2
これは、digizol.com
— 2006/12 /
2
また、Internet Explorerがマージン/ボーダー/パディングの幅を合計する方法（デフォルトの非互換モード）は、他のほとんどすべてのブラウザーとは異なることに注意してください。
— David R Tribble、2014年
1
マージンが機能しない場合は、パディングを試してください
— JoelFan

回答:

410

paddingコンテンツとの間の空間であるborderのに対し、margin境界外の空間です。これは、Googleのクイック検索で見つけた画像で、このアイデアを示しています。

ここに画像の説明を入力してください

— あいうえお
ソース
3
また、これらのサイトで定義を確認してください。しかし、グラフィックは完璧なイラストです。 w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp
— 2011年
@maclunian：上記の@Surootのリンクに加えて、このサイトw3schools.com/css/css_boxmodel.aspも確認してください。
— abcd
これはコンテンツの設定された幅と高さにどのように関係していますか？これはどこで測定されますか？
— Nyerguds
128

ここでの回答に欠けている重要なことが1つあります。

上/下マージンは折りたたみ可能です。

したがって、要素の下部に20pxのマージンがあり、次の要素の上部に30pxのマージンがある場合、2つの要素間のマージンは50pxではなく30pxになります。これは、左/右マージンまたはパディングには適用されません。

— ネイサン
ソース
6
垂直マージンが崩壊する非常に特殊な状況があることに注意してください-2つの垂直マージンが崩壊するだけではありません。（ボックスモデルに非常に精通している場合を除いて）これはさらに混乱を招くだけです。
— BoltClock
76

マージンは要素の外側に適用されるため、要素が他の要素からどれだけ離れているかに影響します。


パディングは要素の内側に適用されるため、要素のコンテンツが境界からどれだけ離れているかに影響します。

また、余白を使用しても要素の寸法には影響しませんが、パディングは要素の寸法（高さ+パディングを設定）を作成するため、たとえば、5xパディングの100x100px divがある場合、divは実際には105x105pxになります。

— ロストリン
ソース
15
私はすべての側面にパディングが適用されていると思うので、要素は110x110pxになります
— 2013Asker
えーと、その幅が以外に設定されている場合、afaikのパディングは要素の幅を変更しませんauto。幅がの場合、autoパディングを追加すると、パディングされた要素の幅がそれに応じて（および@ 2013Askerで述べたように両側から）増加します
— フラットな
1
divの幅が100pxであるため、divは110px x 110pxであると言うのは少し誤解を招くと思います（box-sizingがcontent-boxとして設定されていると仮定）。
— wmock 16
44

次の3つの点を覚えておいてください。

  • マージンは、コントロールの周りの余分なスペースです。
  • パディングは、コントロール内の余分なスペースです。
  • 外部コントロールのパディングは内部コントロールのマージンです。

デモ画像：（ここで赤いボックスは欲望のコントロールです） ここに画像の説明を入力してください

— sms247
ソース
2
これは、なぜ違いを知ることが重要であるかについては答えません。
— GreenAsJade
38

最も簡単な定義は次のとおりです。パディングはコンテナ要素の境界の内側に与えられるスペースであり、マージンは外側に与えられます。コンテナーではない要素の場合、パディングはあまり意味がありませんが、マージンはそれを配置するのに役立ちます。

— 風のチャイムス
ソース
25

パディング

Paddingは、要素コンテンツとその境界線（境界線がある場合）の間のスペースを定義するCSSプロパティです。要素の周囲に境界線がある場合、パディングにより、その境界線からその境界線に表示される要素コンテンツまでのスペースが確保されます。要素の周囲に境界線がない場合、スペースを与える境界線がないため、パディングを追加してもその要素にはまったく影響がありません。

マージン

マージンは、要素の外側から次の外側の要素までのスペースを定義するCSSプロパティです。

マージンは、境界線のある要素とない要素の両方に影響します。要素に境界がある場合、marginはこの境界から次の外側の要素までのスペースを定義します。要素に境界線がない場合、マージンは要素コンテンツから次の外側の要素までのスペースを定義します。

パディングとマージンの違い

したがって、マージンとパディングの違いは、パディングが内部スペースを処理するのに対し、マージンは次の外部要素までの外部スペースを処理することです。

— ラケシュ・シン
ソース
1
ボーダーのない要素はどれですか？
— Sarim Javaid Khan 2017
10

マージンとパディングの主な違いの1つは、いずれの回答にも記載されていません。クリック可能性とホバー検出

パディングを大きくすると、要素の有効サイズが大きくなります。目に見えて大きくしたくない小さめのアイコンがある場合がありますが、ユーザーはそのアイコンを操作する必要があります。アイコンのパディングを増やして、クリックとホバーのフットプリントを大きくしています。アイコンのマージンを大きくしても、同じ効果はありません。

このトピックに関する別の質問への回答が例を示します。

— ポール
ソース
上位の回答のほとんどは、パディングが要素の「内側」であり、マージンが「外側」であることを示しています。これは、パディングがクリック領域の拡大に貢献していることを意味しています。ただし、完全に透明なボックスを扱っている場合はそれほど明白ではありません...
— BoltClock
9

margin =要素の周囲（外側）の境界線から外側へのスペース。

パディング=テキストから境界線までの要素の周囲（内部）のスペース。

こちらをご覧ください：http : //jsfiddle.net/robx/GaMpq/

— robx
ソース
9

違いについて知って良いですmarginとpadding。私の知る限り：

  • マージンは要素の外側のスペースですが、パディングは要素の内側のスペースです。つまり、マージンは要素の境界線の外側のスペースであり、パディングは要素の境界線の内側のスペースです。
  • autoマージンに値を 設定できます。ただし、パディングは許可されていません。こちらをご覧ください。
    注：margin: autoブロック要素を水平方向の親の中央に配置するために使用します。また、マージンをautoに設定することで、フレックスボックス内の要素を垂直方向または水平方向、あるいはその両方の中央に配置することもできます。こちらをご覧ください。
  • マージンは任意の浮動小数点数にすることができますが、パディングは負であってはなりません。
  • 要素にスタイルを設定すると、パディングにもスタイルが設定されます。マージンではありません。マージンは親要素のスタイルを取得します。たとえば、background-colorプロパティを黒に設定すると、その内部スペース（つまり、パディング）は黒になりますが、外部スペース（つまり、マージン）はなりません。
— MAChitgarha
ソース
4

マージンはボックスの外側のスペースです。パディングはボックス内のスペースです。白い塗りつぶしで違いを見分けるのは難しいですが、色付きの塗りつぶしでそれをうまく見ることができます。

— アーネストフリードマンヒル
ソース
2

マージンとパディングはどちらも実際にはパディングのタイプです。1つ（マージン）は要素の境界の外側に出て他の要素から距離を置き、もう1つ（パディング）は要素のコンテンツの外側に出て要素の境界からコンテンツを離します。

— チャンキーボーイ
ソース
2

パディングにより、開発者はテキストとそれを囲む要素との間にスペースを維持できます。マージンは、要素が親DOMの別の要素と維持するスペースです。

例を参照してください：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>
— ラジャット
ソース
1

MarginはCSSのプロパティで、要素の周囲の境界線の外側にスペースを作成するために使用されます。プログラマーは、上、右、下、左のマージンを設定できます。言い換えると、彼はこれらの値をmargin-top、margin-right、margin-bottom、およびmargin-leftを使用して設定できます。

マージンの値は、次のタイプがあります。

まず、autoを使用すると、ブラウザでマージンを計算できます。さらに、長さはマージンをpx、pt、またはcmで示しますが、％はマージンを含む要素の幅に対するパーセンテージとしてマージンを説明するのに役立ちます。最後に、継承は、マージンが親要素から継承する必要があることを示します。

Paddingは、境界線内の要素の周囲にスペースを作成するのに役立つCSSのプロパティです。プログラマは、上、右、下、左のパディングを設定できます。言い換えれば、彼はpadding-top、padding-right、padding-bottom、およびpadding-leftを使用してこれらの値を設定できます。

パディング 値は、次のタイプがあります。

長さは、px、pt、またはcmのパディングを示し、％は、パディングを含む要素の幅に対するパーセンテージとしてパディングを示します。最後に、inheritは、パディングが親要素から継承されることを示しています。

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        
<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>
スニペットを展開

マージンとパディングの違い

マージンは、定義された境界線の外側の要素の周囲にスペースを作成するために使用されるCSSプロパティです。パディングは、定義された境界線の内側の要素の周囲にスペースを作成するために使用されるCSSプロパティです。したがって、これはマージンとパディングの主な違いを説明しています。

値 さらに、マージンの値はauto、長さ、％、または継承のいずれかですが、パディングの値は長さ、％、または継承のタイプのいずれかです。したがって、これはマージンとパディングのもう1つの違いです。

簡単に言うと、マージンとパディングはCSSの2つのプロパティであり、Webページのスタイル設定を可能にします。これらのプロパティに負の値を割り当てることはできません。マージンとパディングの主な違いは、マージンはボーダーの外側の要素の周囲にスペースを作成するのに役立ち、パディングはボーダーの内側の要素の周囲にスペースを作成するのに役立ちます。

— Avidプログラマー
ソース
0

幅と高さのあるブロックdivに背景色を配置してみてください。パディングは要素のサイズを大きくしますが、マージンはドキュメントのフロー内で要素を移動するだけです。

マージンは、要素を移動するためのものです。

— ヘンリー
ソース
0

パディングはWebページ上の最も近いコンポーネント間のスペースであり、マージンはWebページのマージンからのスペースです。

— プラビーシュRK
ソース
0

気づいたことは1つありますが、上記の回答には言及していません。空の内部htmlコンテンツで初期化される動的に作成されたDOM要素がある場合、この空の要素がコンテンツの作成以外のスペースを占有しないようにする場合は、パディングの代わりにマージンを使用することをお勧めします。

— クレスウェイ
ソース
-1

重要な違いが1つあります。

余白は要素の外側にあります。つまり、要素が始まる「後に」空白シフトを適用します。パディングは内側にあり、もう一方は要素が始まる「前」に空白を適用します。

— アルス
ソース
-1

マージンは要素の外側に適用されるため、要素が他の要素からどれだけ離れているかに影響します。

パディングは要素の内側に適用されるため、要素のコンテンツが境界からどれだけ離れているかに影響します。

また、余白を使用しても要素の寸法には影響しませんが、パディングは要素の寸法（高さ+パディングを設定）を作成するため、たとえば、5xパディングの100x100px divがある場合、divは実際には105x105pxになります。

— シャマル・カプリ
ソース
この回答がすでに出されていることに気づきましたか？-そして、適切な強調が追加されていますか？
— JerryOL 2013
-1

基本的に、パディングとマージンの違いは背景の観点から来ます。パディングはコンテンツ間のスペースを決定し、マージンは要素の外側のエッジを決定します！

— ビンダットハ
ソース
-7

パディングは、コンテンツと境界線の間のスペースです。マージンの間のスペースはどこにあるよう境界線と他の要素。

— アリ・マムーン・リズワン
ソース
1
マージンはそれほど単純ではありません、そしてこれはダースの以前の答えがまだ言っていないことを何も言いません。
— クエンティン
2
あなたは以前の答えを繰り返しました。
— Johnroe PauloCañamaque2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.