嵌套 div 时不要在宽度中包含 margin/padding

Question

我在剪辑缩略图上有一个叠加层，还有一个用于打开 iFrame 的点击事件。叠加层将包含有关剪辑的 JSON 响应数据，但是，我在设置叠加层样式时遇到问题，无法将边距包含在叠加层的总大小中。由于显而易见的原因，这使得对齐文本非常有问题。

那么我如何才能使叠加层采用相同的边距，而不向叠加层添加边距有效地使边距完全翻倍？

#clips {
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
}

.clipImg {
  flex: 1;
  margin-bottom: 1em;
  padding-right: 1em;
}

.clipImg-overlay {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 496;
  height: 272;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, .7);
  font-family: sans-serif;
}

.clipImg-container:hover .clipImg-overlay {
  opacity: 1;
}

<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride"><img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
  <div class="clipImg-overlay"><img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
    <div id="info-container">
      <h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
      <p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
      <p id="clip-views">4 views</p>
      <p id="clip-curation">Clipped by sudocodesh</p>
    </div>
  </div>
</div>

Answer 1

.clipImg-overlay 相对于 .clipImg-container，它以 .clipImg 边距扩展。

要解决这个问题，您可以尝试在 .clipImg-container 中使用边距，或者在 .clipImg-overlay 和 .clipImg 周围创建一个 div，并使边距实际在 .clipImg.

<style>
  .clipImg {
    flex: 1;
  }

  .clipImg-container {
    margin-bottom: 1em;
    padding-right: 1em;
  }
</style>
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride">
  <img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
  <div class="clipImg-overlay">
    <img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
    <div id="info-container">
      <h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
      <p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
      <p id="clip-views">4 views</p>
      <p id="clip-curation">Clipped by sudocodesh</p>
    </div>
  </div>
</div>

或

<style>
  .overlay-container {
    position: relative;
    margin-bottom: 1em;
    padding-right: 1em;
  }
</style>
<div class="clipImg-container" data-slug="ManlyEnjoyableSowKappaPride">
  <div class="overlay-container">
    <img src="https://clips-media-assets2.twitch.tv/28966899744-offset-8838-preview-480x272.jpg" class="clipImg">
    <div class="clipImg-overlay">
      <img id="channel-logo" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d7747302-0948-478a-9017-976d285a2678-profile_image-150x150.png">
      <div id="info-container">
        <h1 id="clip-name">CODE BLUE CODE BLUE | Tip for free !loots</h1>
        <p id="clip-context">CodeSpent is playing PLAYERUNKNOWN'S BATTLEGROUNDS</p>
        <p id="clip-views">4 views</p>
        <p id="clip-curation">Clipped by sudocodesh</p>
      </div>
    </div>
  </div>
</div>

嵌套 div 时不要在宽度中包含 margin/padding

Don't include margin/padding in width when nesting divs

html

css

margin

padding