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

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>