CODEWITHSUNDEEP
htmlcss
Alari Truuts
Alari Truuts

Reputation: 320

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.

Upvotes: 5

Views: 6441

Answers (1)

xinyu
xinyu

Reputation: 148

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

Upvotes: 0

Related Questions