个人中心
gpt4 book ai didi

html - CSS 新手 TOP 问题 : Adding padding in exercise creates large gap on top of element. 添加 margin-top of 0 修复它但我不知道为什么

转载 作者：行者123 更新时间：2023-12-05 01:22:34 25 4
gpt4 key购买 nike

这是我关于 stackoverflow 的第一个问题，如果我没有做对所有事情，请多多包涵。如果我可以更好地格式化它，请告诉我。

我正在完成 TOP 2nd CSS Margin/Padding 练习。我能够通过第一个没问题，但我在第二个任务中遇到了我不明白的情况。

目标是操纵填充/边距以实现特定的预期结果。下面是HTML原件和CSS原件，后面是解决方案。我在底部放置了指向所需结果的 .png 的链接。

我的问题专门针对 .card 和 .title 元素。

在 .card 元素添加 8px 内边距之前，.title 元素内蓝色背景的边缘一直到框的顶部边缘，并与 .card 元素齐平。当我向 .card 元素添加 8px 填充时，它似乎正确地将其添加到所有内容的左侧、右侧和底部，但是 .title 元素的顶部在蓝色框顶部之间的空白区域中几乎翻了一番.title 元素和 .card 元素的顶部。

然后通过添加 margin-top: 0 来解决这个问题；在 .title 元素中。

我很难理解为什么我需要添加 0 的顶部边距。我想我理解其他一切。但是为什么没有填充的所有东西都是齐平的，但是当我添加 8px 填充时，它在所有方面看起来都很好，除了顶部看起来是双倍的，需要 margin-top: 0;被插入到 .title 元素中

它与 h1 边距有一些额外的边距有什么关系吗？同样，这是我第一次参加 CSS，所以我不确定这是否正确。如果它确实与 h1 边距有关，为什么我只在添加填充时才看到它？

也许我在这里遗漏了一个 super 简单的概念，但它让我费尽心思，所以我们将不胜感激。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin and Padding exercise 2</title>
    <link rel="stylesheet" href="solution.css">
  </head>
  <body>
    <div class="card">
      <h1 class="title">I'm a card</h1>
      <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
      <div class="button-container">and a <button>BIG BUTTON</button></div>
    </div>
  </body>
</html>

CSS原创+解决方案

body {
      background: #eee;
      font-family: sans-serif;
    }
    
    .card {
      width: 400px;
      background: #fff;
      margin: 16px auto;
    }
    
    .title {
      background: #e3f4ff;
    }
    
    .content {
      background: #e3f4ff;
    }
    
    .button-container {
      background: #e3f4ff;
    }
    
    button {
      background: white;
      border: 1px solid #eee;
    }
    
    /* SOLUTION */
    
    /* disclaimer: duplicating the selectors here isn't best practice.
    In your solution you probably put it right inside the existing selectors,
    which _is_ the best practice.
    We separated it out here to make it extra clear what has changed. */
    
    .card {
      padding: 8px;
    }
    
    .title {
      margin-top: 0;
      margin-bottom: 8px;
      font-size: 16px;
      padding: 8px;
    }
    
    .content {
      margin-bottom: 8px;
      padding: 16px 8px;
    }
    
    .button-container {
      text-align: center;
      padding: 8px;
    }
    
    button {
      display: block;
      margin: 0 auto;
      padding: 8px 24px;
    }

body {
  background: #eee;
  font-family: sans-serif;
}

.card {
  width: 400px;
  background: #fff;
  margin: 16px auto;
}

.title {
  background: #e3f4ff;
}

.content {
  background: #e3f4ff;
}

.button-container {
  background: #e3f4ff;
}

button {
  background: white;
  border: 1px solid #eee;
}


/* SOLUTION */


/* disclaimer: duplicating the selectors here isn't best practice.
        In your solution you probably put it right inside the existing selectors,
        which _is_ the best practice.
        We separated it out here to make it extra clear what has changed. */

.card {
  padding: 8px;
}

.title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 16px;
  padding: 8px;
}

.content {
  margin-bottom: 8px;
  padding: 16px 8px;
}

.button-container {
  text-align: center;
  padding: 8px;
}

button {
  display: block;
  margin: 0 auto;
  padding: 8px 24px;
}
<div class="card">
  <h1 class="title">I'm a card</h1>
  <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
  <div class="button-container">and a <button>BIG BUTTON</button></div>
</div>

enter image description here

最佳答案

造成您所观察到的现象的原因是名为 collapsing margins 的 CSS“功能” ，几十年来一直让开发人员头疼。

让我向您展示一个非常简单的例子来说明它是如何工作的。

.outer {
  background-color: green;
  height: 250px;
}

.inner {
  background-color: orange;
  height: 100px;
}
<div class="outer">
  <div class="inner"></div>
</div>

所以这符合我们的预期:它显示橙色 div.inner就在绿色里面div.outer , 在 div.outer 的最顶端.

如果我们想移动 div.inner 怎么办？比方说 20px inside div.outer ？

让我们尝试一下看似直观的方法:.inner { margin-top: 20px; } 

.outer {
  background-color: green;
  height: 250px;
}

.inner {
  background-color: orange;
  height: 100px;
  /* let's move it down 20px */
  margin-top: 20px;
}
<div class="outer">
  <div class="inner"></div>
</div>

现在不是向下移动div.inner里面div.outer , 整体div.outer已经搬家了，有了div.inner相对于 div.outer 仍然处于非常相同的位置.

嗯？？？

这就是collapsing margins 起作用的地方。在某些情况下，如果 parent 有一个 margin-top ( 0 默认为 div )有一个 child 有一个 margin-top (就像在你的代码中 h1 有)，两个边距 collapse，意味着 具有较大边距的元素将应用于父元素，而不是子元素.

这仅适用于父元素没有 padding-top 的情况放。只需将其设置为 1px阻止边距崩溃:

.outer {
  background-color: green;
  height: 250px;
  /* stops collapsing margins: */
  padding-top: 1px;
}

.inner {
  background-color: orange;
  height: 100px;
  /* let's move it down 20px */
  margin-top: 20px;
}
<div class="outer">
  <div class="inner"></div>
</div>

正在发生的事情在 MDN 上针对三种不同的基本情况进行了描述，这一种适用于此:

No content separating parent and descendants

If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

关于html - CSS 新手 TOP 问题 : Adding padding in exercise creates large gap on top of element. 添加 margin-top of 0 修复它但我不知道为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73684353/

25 4 0
文章推荐： rust - 128bit由64bit原生划分
文章推荐： c++ - 为什么 C++ 隐式转换有效，但显式转换会抛出错误(具体示例)？
文章推荐： abap - ABAP 中的评估顺序
文章推荐： C# { } 运算符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com