How do I get a parent element (example here - <header>) without its own padding to include a child element's padding (example here - <h1>) in its height?
If I added 1px of padding to my parent element, then it includes both its own and the child's padding. But without its own padding, it ignores the child padding.
body {
margin: 0px;
}
header {
background: skyblue;
}
header.padded {
padding-top: 1px;
}<header>
<h1>Heading</h1>
</header>
<header class="padded">
<h1>Another Heading</h1>
</header>
