なぜGitHubはパディングとマージンの両方を使用していますか？

Question

GitHub使用マージン：40pxとパディング：24px。マージンやパディングのみを使用するのは良くありませんか？例。余白：64pxまたは埋め込み：64px私はGitHubが両方を使用する理由を知りたい。人々が一緒にマージンとパディングを使用する理由

<style text="css"> 
.mb-6 { 
    margin-bottom: 40px; 
} 
.pb-4 { 
    padding-bottom: 24px; 
} 
</style> 

<p class="alt-lead text-center text-gray mb-6 pb-4 col-md-10 mx-auto"> 
    Open source software is free for you to use and explore. Get involved to perfect your craft and be part of something big. 
</p> 
<div class="clearfix gut-lg"> 
    <div class="float-left col-md-4"> 
    <div class="clearfix mb-4 text-md-center"> 
     <div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-future.svg?sn" alt="" aria-hidden></div> 
     <div class="overflow-hidden"> 
     <h3 class="alt-h4 mb-2">Shape the future of&nbsp;software</h3> 
     <p class="alt-text-small text-gray">Your contributions help make technology better for everyone, developers and non-develo&nbsp;alike.</p> 
     </div> 
    </div> 
    </div> 
    <div class="float-left col-md-4"> 
    <div class="clearfix mb-4 text-md-center"> 
     <div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-best.svg?sn" alt="" aria-hidden></div> 
     <div class="overflow-hidden"> 
     <h3 class="alt-h4 mb-2">Work with the best in the&nbsp;field</h3> 
     <p class="alt-text-small text-gray">Amazing developers use GitHub. Contribute code to projects that change how software&nbs&nbsp;built.</p> 
     </div> 
    </div> 
    </div> 
    <div class="float-left col-md-4"> 
    <div class="clearfix mb-4 text-md-center"> 
     <div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-grow.svg?sn" alt="" aria-hidden></div> 
     <div class="overflow-hidden"> 
     <h3 class="alt-h4 mb-2">Grow your skills and help&nbsp;others</h3> 
     <p class="alt-text-small text-gray">Whatever your skill level, working on open source software is a great way to learn newp;things.</p> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなたはすでにmarginとpaddingの違いが分かっていると思います。なぜ彼らは両方の1つのものの代わりに組み合わせて使用​​するのだろうか。

コードを確認してください。あなたは彼らが別のクラスから来ているのを見るでしょう。

.mb-6 { 
    margin-bottom: 40px; 
} 
.pb-4 { 
    padding-bottom: 24px; 
} 

、あなたは少し深く掘る場合は、彼らは彼らの枠組みの中でこれらのクラスを持って表示されます。彼らは64pxのスペースが必要な場合pb-6

にパディングpb-1ため

.mb-1{ margin-bottom: 4px } 
.mb-2{ margin-bottom: 8px } 
.mb-3{ margin-bottom: 16px } 
.mb-4{ margin-bottom: 24px } 
.mb-5{ margin-bottom: 32px } 
.mb-6{ margin-bottom: 40px } 

と同じこと今、彼らは新しいクラスを定義するか、または、それらのクラスを再利用するためのオプションがあります。 そして、.pb-4 + .mb-6を再利用して、新しいクラスを1回だけ定義するのではなく、フレームワークで混乱させることなく64pxにすることを選択します。

Answer 2

理由は、通常、背景色、または背景画像の使用に起因するものです。

背景が空白/透明のままの場合は、パディングまたは余白を使用するかどうかは関係ありません。ただし、背景色を設定すると、背景色を含む要素のサイズが増加し、余白によって他の要素との間で空白が作成されます。

これはあなたの理解に役立つことを願っています！

Answer 3

私が理解しているところは、GitHubのスタイルを経て、CSSにmarginとpaddingの両方を使用していることに気づいたことです。あなたの質問は、「どちらか一方を使用していますか両方を優先しているのですか？または1つの方法に利点がありますか？

なし、そこにいずれかを使用しての利点はありませんが、どのようなマージンとパディングを理解する必要がありますされている答え

マージン

証拠金は、その要素と要素の間の空間であり、されていますその周りに。何かにmargin:5pxと言っていると、要素全体に5ピクセル幅の余白があり、他の要素はそれに「触れない」ことを保証します。

例：第一要素と第二要素との間に非常に目に見えるGABがあること

注意。そして、容器の左側と第1の要素との間にも隙間がある。

.row > * { 
 
    float: left; 
 
    min-width: 25%; 
 
    max-width: 30%; 
 
    margin: 5px; 
 
    background-color: blue; 
 
    color: white; 
 
}

<div class="row"> 
 
    <div>Hi</div> 
 
    <div>Hello</div> 
 
</div>

パディング

パディングが、一方で、要素のエッジと要素自身の内容の間がなければならないどのくらいのスペースです。 padding:5pxは、各側に5ピクセル幅の要素内に一種の境界があると言います。最初の例を拡張する：

各要素の壁の内容（背景が始まりまたは終わるところ）とテキストの内容の間には、ごくわずかな隙間があることに注意してください。

.row > * { 
 
    float: left; 
 
    min-width: 25%; 
 
    max-width: 30%; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    /*Try removing/changing this value to see what effect it has.*/ 
 
    background-color: blue; 
 
    color: white; 
 
}

<div class="row"> 
 
    <div>Hi, this text is longer so that we can see the border around the element and how much space there is between the walls of the element and the text.</div> 
 
    <div>Hello</div> 
 
</div>

Tlの、博士

マージンは、要素間の間隙またはいくつかのスペースを作成するために使用されます。埋め込みは、要素のコンテンツの間にスペースを作成するために使用され、内容はで、「壁」です。マージンが 境界線の外側の空間であるのに対し、

Answer 4

ですから、

パディングを知っているように見えるが、国境の内側の空間です。

同じ要素で続く要素にmarginが設定されている場合は、できるだけ大きな値をとることになります。したがって、margin-bottomが次の要素のmargin-topより大きい場合はmargin-bottomとなります。

例のギャップは、最初の要素から20pxのマージンボトムになります。

* {margin:0; padding:0;} 
 

 
div { 
 
    width: 100px; height: 100px; 
 
    background-color: orange; 
 
    border: solid 1px black; 
 
} 
 

 
div.one { 
 
    margin-bottom: 20px; 
 
} 
 

 
div.two { 
 
    margin-top: 5px; 
 
}

<div class="one"></div> 
 
<div class="two"></div>

ちょっと同じ例ギャップは再び20ピクセルであるが、この時間は、それが第二の要素からマージントップです。

* {margin:0; padding:0;} 
 

 
div { 
 
    width: 100px; height: 100px; 
 
    background-color: orange; 
 
    border: solid 1px black; 
 
} 
 

 
div.one { 
 
    margin-bottom: 5px; 
 
} 
 

 
div.two { 
 
    margin-top: 20px; 
 
}

<div class="one"></div> 
 
<div class="two"></div>

そして、ここであなたはパディングを使用するとどうなりますか。ブラウザのデバッガを使用する場合は、あなたがそれを見るだろう、今のギャップが、なぜに答えるために27px（+ 2x1px国境の両方の要素のパディングから25ピクセル）

* {margin:0; padding:0;} 
 

 
div { 
 
    width: 100px; height: 100px; 
 
    background-color: orange; 
 
    border: solid 1px black; 
 
} 
 

 
div.one { 
 
    padding-bottom: 5px; 
 
} 
 

 
div.two { 
 
    padding-top: 20px; 
 
}

<div class="one"></div> 
 
<div class="two"></div>

でなければなりません。あなたがこれを知っているならば、あなたはそれを互いに使う理由を持つことができます。