Make parent div grow with child

Question

How can I make the p tag below expand to be the size of its child span? This should be relatively straight forward but I tried the usual display, overflow, etc and can't get it.

div {
  margin: 5rem;
}
p {
  -webkit-margin-after: 0.7rem;
  margin-block-end: 0.7rem;
  -webkit-margin-before: 0.2rem;
  margin-block-start: 0.2rem;
  line-height: 150%;
}

p {
  font-size: 1rem;
}

.font-h1size {
  font-size: 3.052rem;
}

<div>

  <p style="border: 1px solid black;"><span class="font-h1size">The border is from the parent p tag</span></p>

</div>

remove the line-height? make it inline-block? can you explain what you mean by *expand*? — Temani Afif, Mar 03 '20 at 12:05
The line-height of 150% applies to the 1rem font size of the paragraph. Prime example for why specifying line-height _unit-less_ is almost always preferable, IMHO. `line-height: 1;` or similar, probably does a much better job for you here (depending on what _exactly_ you want.) — CBroe, Mar 03 '20 at 12:06
related to understand your issue: https://stackoverflow.com/a/60109105/8620333 (probably a duplicate if you are missusing the line-height) — Temani Afif, Mar 03 '20 at 12:09
Though your question has been answered, if you'd like to keep all your styles as is, you can add some padding to `p`: `p { -webkit-margin-after: 0.7rem; margin-block-end: 0.7rem; -webkit-margin-before: 0.2rem; margin-block-start: 0.2rem; line-height: 150%; padding: 10px 5px 8px 5px; }` — anastaciu, Mar 03 '20 at 12:21

score 1 · Accepted Answer · answered Mar 03 '20 at 12:12

The line-height of 150% applies to the 1rem font size of the paragraph.

This would be a prime example for why specifying line-height unit-less is almost always preferable, IMHO.

line-height: 1; or similar, probably does a much better job for you here (depending on what exactly you want.)

Make parent div grow with child

1 Answers1