CODEWITHSUNDEEP
htmlcsspadding
darkchampionz
darkchampionz

Reputation: 1234

CSS - Make child div have same padding as parent div

I use the following format:

body: margin x%
.parent: padding y%
    .child: some width, exact above padding

Body has a margin of x percent. Inside, there is a parent div that has a y percent padding. And a child div of some width that I am trying to make it have the exact same padding as the parent. Any suggestions without using javascript?

Upvotes: 0

Views: 3209

Answers (2)

Temani Afif
Temani Afif

Reputation: 274097

You can approximate this relying on vw unit. The padding consider the width of the parent to get computed so the padding of the parent element will be width of viewport - margin of the body = width of the body. We can consider calc() to obtain the padding and use the same for the child.

Here is an example where I consider 10% padding and 5% margin on the parent. The only drawback of this method is the width of scroll bar that is considered in the calculation that's why I call it an approximation

.parent {
  padding:calc((100vw - 2*0.05*100vw)*0.1);
  border:1px solid;
}
.percentage {
  padding:10%;
}
.child {
  padding:calc((100vw - 2*0.05*100vw)*0.1);
  border:1px solid;
}

body {
  margin:5%;
}
<div class="parent percentage">
  <div class="child">
    some content here
  </div>
</div>
<div class="parent">
  <div class="child">
    some content here
  </div>
</div>

Upvotes: 0

Robson
Robson

Reputation: 1277

Use padding: inherit; for child elements. A child element will get the padding from a parent div.

Upvotes: 1

Related Questions