为什么GitHub同时使用填充和边距？

Question

GitHub使用margin：40px和padding：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之间有所不同。但不知道为什么他们使用两者结合而不是一件事。

如果您检查他们的代码。你会看到他们来自不同的班级。

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

如果你深入一点，你会看到他们在他们的框架中有这些类。

.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-1到pb-6

现在，如果他们想64PX空间他们有选项来定义一个新的类或再使用这些类。 他们选择重复使用.pb-4 + .mb-6以获得64px，而不是只使用和不使用它们的框架来定义一个新的类。

Answer 2

为什么人们会使用margin和padding在一起，通常是由于使用的背景颜色或背景图片的原因。

如果背景是空白/透明的，它不会，如果你使用的填充或利润率关系。但是一旦设定了背景颜色，填充将增加，这包括背景色的元件的尺寸，而余量将它从创建在之间的空白的其他元件分离。

希望这可以帮助你理解！

Answer 3

我的理解是，你经历了GitHub的风格，并注意到他们在他们的CSS中使用了margin和padding。你的问题似乎是“正在使用一种/两种首选还是一种方法有优势？”

这个问题的答案是否定的，没有一个优势，使用下去，但你需要了解什么margin和padding 是

保证金

保证金是元素和元素之间的空间周围。所以说东西就会把五个像素大幅的元素的整体周围margin:5px，确保其他元素不“碰”了。

实施例：

注意，存在第一元件和第二元件之间的非常明显的GAB。甚至有所述容器的左侧和第一元件之间的间隙。

.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说有一个排序边界的元件宽五个像素在每一侧上的内侧。为了扩展我们的第一个例子：

注意到有各元素的壁（其中背景开始或结束）的内容和文本内容之间的非常小的间隙。

.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>

铊;博士

保证金用于创建一个间隙或元件之间的一些空间。填充用于在元素内容和它的“墙壁”之间创建空间。

Answer 4

所以，你似乎知道

填充是边界内部空间，而保证金外 边界的空间。

您是否也知道这意味着，如果您已将margin设置为相同元素后面的元素，则它将采用最大可能值。因此，如果margin-bottom大于以下元素的margin-top，则需要margin-bottom。

因此，示例间隔将从第一个元素20px起到margin-bottom。

* {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>

有点儿相同的例子间隙再次20px的是，但这次是从第二元件边缘顶部。

* {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边框25px的）

* {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>

因此，要回答为什么。如果你知道这一点，你可以有理由相互使用一个。