Vertical padding % - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. padding

Description

Vertical padding %

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
html {<!--from www  .  j  av  a 2  s.  com-->
   min-height:100%;
   position:relative
}

body {
   height:100%
}

body {
   background-color:Chartreuse;
   margin:0;
   padding:0;
   color:yellow;
   font-family:"Courier New", Courier, monospace;
   font-size:14px;
}

.white-div {
   height:51%;
   width:100%;
   background-color:blue;
   position:absolute;
   top:0;
   vertical-align:bottom;
}

.white-div p {
   text-align:center;
   width:501px;
   position:absolute;
   bottom:0;
   right:51% ;
   margin-right:-251px;
}

p {
   margin:0;
   paddin:0;
}

.black-div {
   text-align:center;
   width:100%;
   height:51%;
   position:absolute;
   bottom:0;
}
</style> 
 </head> 
 <body translate="no"> 
  <div> 
   <div class="white-div"> 
    <p> <a href="http://www.lorenzomeschini.com/architecture" ; onmouseover="this.style.color='#FCB415'" onmouseout="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#dddddd; font-size:19px; letter-spacing:0.22em; height:100%">Lorem ipsum </a> </p> 
   </div> 
   <div class="black-div"> 
    <a href="http://www.lorenzomeschini.com/photography" ; onmouseover="this.style.color='#FCB415'" onmouseout="this.style.color='#cccccc'" style="text-align:center; font-family:Tahoma, Geneva, sans-serif; color:#cccccc; font-size:19px; letter-spacing:0.21em; height:100%">Lorem ipsum</a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials