'CSS child height 100% with parent padding

I've gone through a lot of similarly named questions, but have not been able to find an answer.

When a parent div has a padding and I create a child div, width 100% follows the content-box size of the parent, but height 100% seems to take the border box value of the parent. So for instance a parent with height 100px and 5px padding would create a child of height 100% with the height 100px instead of 90px.

Can anyone help me achieve the height of the parents content-box with padding?

I want to achieve a nice horizontal border, that is clipped in both ends, but is still centered.

htmlcss


Solution 1:[1]

If I understand you correctly:

   <div style:"padding:15mm">
        <div class="container" style="display: grid; grid-template-columns: 1fr 1fr 1fr; box-sizing: content-box;">
            <img style="max-width: 100%;" src="images/image.png"
                alt="">
            <img style="max-width: 100%;" src="images/image.png"
                alt="">
            <img style="max-width: 100%;" src="images/image.png"
                alt="">
        </div>
    </div>

enter image description here

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 xinyu

Related Questions