保证金

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

我猜您已经知道config/config.php和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

的内容相同

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

Answer 2

人们一起使用边距和填充的原因通常是由于使用背景颜色或背景图像。

如果背景为空白/透明，则使用填充或边距无关紧要。但是，一旦设置了背景颜色，填充将增加包含背景颜色的元素的大小，而边距会将其与其他元素分开，从而在其间创建空白区域。

希望这有助于您理解！

Answer 3

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

答案是否定的，使用任何一个都没有优势，但你需要了解哪些边距和填充

保证金

边距是该元素与其周围元素之间的空间。所以对某些内容说margin:5px将在整个元素周围放置一个五像素宽的边距，确保其他元素不会“触摸”它。

示例：

请注意，第一个元素和第二个元素之间存在非常明显的误差。容器的左侧和第一个元素之间甚至存在间隙。

.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的边距底部。

＆＃13;

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

＆＃13;

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

＆＃13;

有点相同的示例差距再次是20px，但这次它是第二个元素的上边距。

＆＃13;

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

＆＃13;

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

＆＃13;

如果使用填充，会发生什么。如果您使用浏览器调试器，您将看到现在差距应为27px（两个元素填充为25px + 2x1px边框）

＆＃13;

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

＆＃13;

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

＆＃13;

所以回答原因。如果你知道这一点，你可以有理由使用其中一个。

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

4 个答案:

保证金

填充

铊;博士