How to always have 50px white space above an Header (H2) element, even if the Header is not present?

Admin 1
Viewed 82

I have a strange question. I always want 50px padding white space, above my Header(H2) Title. Where I am having trouble is that, if there is no Header, then the white space above the header is collapsing. Is there a way to always keep 50px padding above the Header, even if the header is not present?

I tried adding padding-top: 50px on my myComponent class. But that didn't work because, that is adding extra white space above, when there is a header present.

<div class="myComponent">
 <div class="myContainer">
   <div id="head_Title" class="mainTitle">
    <h2 class="titleName"> This is a Title</h2>
   </div>
   <div id="description" class="mainDescription"></div>
 </div>
</div>
css html
2 Answers

If you want it for all your document:

<html>
<head>
...
<style>
h2 { padding-top: 0; }
#head_Title { padding-top: 50px; }
</style>
...
</head>
<body>
...
</body>
</html>
user_22366950

Best solution depends on whether or not the DIV.mainTitle is really actually gone or just empty .. what works in either case is an additional wrapper around it, which has the desired padding-top.

<style>
h2{padding-top:0;}
.spacer{ padding-top: 50px; }
.myComponent{ background-color: #eee; }
.myContainer{ background-color: #ddd; }
.mainDescription{ min-height: 1em; background-color: #aaa; }
</style>


<div class="myComponent">
 <div class="myContainer">
   <div class="spacer"><div id="head_Title" class="mainTitle">
    <h2 class="titleName"> This is a Title</h2>
   </div></div>
   <div id="description" class="mainDescription"></div>
 </div>
</div>

<div class="myComponent">
 <div class="myContainer">
   <div class="spacer"></div>
   <div id="description" class="mainDescription"></div>
 </div>
</div>

Of course the above code is broken due to doubled-IDs .. it's meant to be read as two examples of the HTML .. bottom one with DIV.mainTitle GONE.

user_30223870
Related