我怎样才能使填充保持在我的 div 之外

Question

我不知道我会怎么问这个问题，但是就这样，我正在训练 css 并且我实际上是在复制一些随机布局，我发现这个网站他在 div 之外使用填充（pic1，pic2），这样他的内容保持集中，我想知道我该怎么做，我的方式（pic3，pic4），因为你可以看到填充保持在 div 内（它保存我的部分产品）使部分不集中。

图1

图2

图3

图4

tsx

      <div className={styles.sectionHeader}>
        <h1>Top Picks</h1>
        <a href="/">Ver todos</a>
      </div>
      <div className={styles.sectionWithTopPicks}>
        <div className={styles.eachItemSection}>
          <Image src={img1} width={800} height={800} layout="responsive" />
          <p>texto do produto</p>
          <h5>R$ 50,00</h5>
        </div>
        <div className={styles.eachItemSection}>
          <Image src={img1} width={800} height={800} layout="responsive" />
          <p>texto do produto</p>
          <h5>R$ 50,00</h5>
        </div>
        <div className={styles.eachItemSection}>
          <Image src={img1} width={800} height={800} layout="responsive" />
          <p>texto do produto</p>
          <h5>R$ 50,00</h5>
        </div>
        <div className={styles.eachItemSection}>
          <Image src={img1} width={800} height={800} layout="responsive" />
          <p>texto do produto</p>
          <h5>R$ 50,00</h5>
        </div>
      </div>
    </div>

scss

.productBox {
  display: block;
  position: relative;
  box-sizing: border-box;
  height: 700px;
  width: 100%;
  background: saddlebrown;
  padding: 0 40px 0 40px;

  h1 {
    font-size: 4rem;
  }
}

.sectionHeader {
  display:flex;
  justify-content: space-between;

  a {
    font-size: 32px;
    font-weight: 400;
    font: sans-serif;
  }
}

.eachItemSection{
  width:25%;
  height: 500px;
  padding: 0 0 0 22px;


  img{
    align-self: center;
    width: 

  }
}

.sectionWithTopPicks{
  padding-top: 50px;
  flex-wrap: wrap;
  background: black;
  display: flex;
  justify-content: space-around;

  
  p {
    color: white
  }
  h5 {
    color: white
  }
}

Answer 1

您如何在这里看到CSS 盒模型解释padding和border是 html 元素的一部分。

你也可以在这里玩。 因此，如果您想要 div 之外的空间，则可以使用边距。

对于对齐，我可以建议使用margin-left: auto; margin-right:auto; margin-left: auto; margin-right:auto;

Answer 2

我理解你的目标，但你必须调整代码。

使用 flexbox 方法，您可以：

1. 使用 flex-div 来保存您的项目： .sectionWithTopPick { display: flex; } .sectionWithTopPick { display: flex; }
2. 在其中，使用 div 来保存内容，并告诉 div 如何使用flex-grow: 0; flex-shrink: 1; flex-basis: 25%来适应父 flex-box。 flex-grow: 0; flex-shrink: 1; flex-basis: 25% flex-grow: 0; flex-shrink: 1; flex-basis: 25% （这告诉内部 div 永远不要超过 25%，但必要时缩小）。 这个 div 也有填充。
3. Select 第一项带有:fisrt-child并删除左填充
4. Select 最后一项带有:last-child并删除右填充
5. 使用另一个 div 来包含项目的内容，并使其图像填充 100% 的空间。

这是一个带有工作解决方案的代码笔

Answer 3

我同意 Ale Macedo 的回答，但我会做出以下更改。

.eachItemSection {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
  padding: 2vh .5vw;
      &:first-child {
    padding-left: 1vw;
  }   &:last-child {
    padding-right: 1vw;
  }