嵌套 div 时不要在宽度中包含边距/填充答案

【问题标题】：Don't include margin/padding in width when nesting divs嵌套 div 时不要在宽度中包含边距/填充
【发布时间】：2018-06-09 01:34:31
【问题描述】：

我在剪辑缩略图上有一个叠加层，还有一个用于打开 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>

【问题讨论】：

标签： html css margin padding

【解决方案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>

【讨论】：

谢谢，是的，我确实意识到不久之后有一些混乱和缺乏注意边距是如何嵌套的，并且没有得到适当的处理。给覆盖层一个填充以匹配边距，效果很好。