'Padding/Margin of absolute positioned children not affecting parent height

I have a parent container div with relative positioning. Inside the div I have a textblock and an image. The textblock has an absolute positioning to overlay the image and the image itself has an object-fit: cover.

<div class="landing-cms-grid-content">
     <img src="....." />
     <div class="landing-cms-grid-content-wrapper">
          <div class="landing-cms-grid-subtitle">
               Lorem Ipsum
          </div>
          <a href="#" class="btn btn-block btn-buy">
               Shop now
          </a>
      </div>
 </div>

When I give my .landing-cms-grid-content-wrapper top and bottom padding, it doesn't adds to the height of the landing-cms-grid-wrapper. Is it possible to include paddings/margins of absolute positioned children in the calculation of the parent containers height?

Best regards, Alex

javascripthtmlcss


Solution 1:[1]

Quick answer, no. An absolute positioned element is positioned relative to nearest ancestor, in this case it's the element you're attempting to apply padding to and will disregard the box model attributes of its padding. However you could accomplish the same effect by taking the measurement of your padding you wish to apply and instead apply it to the relative spacing of the absolute positioned element. Eg; padding-top: 1rem on the relative parent ancestor becomes top: 1rem of the absolute positioned child.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris W.

Related Questions