Search code examples
htmlcssmarginpadding

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

I have an overlay over a clip thumbnail, and a click event to open the iFrame. The overlay will contain the JSON response data about the clip, however, I'm having trouble styling the overlay to not include the margins in the overlay's total size. This, for obvious reasons, makes aligning text very problematic.

So how would I make it so the overlay takes that same margin, without adding the margin to the overlay effectively doubling the margin entirely?

#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>

enter image description here enter image description here

Solution

  • The .clipImg-overlay is relative to the .clipImg-container, that expands with the .clipImg margin.

    To resolve this you could try to use the margin in the .clipImg-container or make a div that surrounds .clipImg-overlay and .clipImg and have the margin that is actually in .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>

    or

    <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>