Padding at the bottom - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding

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

Description

Padding at the bottom

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsu</title> 
  <style type="text/css">
body,<!--from  w ww  . ja va2  s. co  m-->
html {
   font-family:Franklin Gothic Book;
   size:12px;
   margin:0;
   padding:0;
   color:Chartreuse;
   background:yellow;
   vertical-align:top;
}

td {
   vertical-align:top;
}

#wrap {
   width:981px;
   margin:0 auto;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') repeat-y;
   overflow:hidden
}

#header {
   width:100%;
   background:blue;
   padding:0;
}

.center {
   text-align:center;
}

.header {
   width:100%;
   padding:0;
   min-height:161px;
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='pink', endColorstr='OrangeRed');
   background:-webkit-gradient(linear, left top, left bottom, from(grey), to(BlueViolet));
   background:-moz-linear-gradient(top, Chartreuse,  yellow);
   border-top:2px solid blue;
   border-bottom:2px solid pink;
}

h1 {
   margin:0;
}

#nav {
   padding:6px 11px;
   background:OrangeRed;
   border-top:2px solid grey;
   text-align:right;
}

#nav ul {
   margin:0;
   padding:0;
   list-style:none;
}

p {
   margin-bottom:0px;
}

#nav li {
   display:inline;
   margin:0;
   padding-right:11px;
   background-color:BlueViolet;
}

#main img {
   float:left;
   width:690px;
   margin-top:11px;
}

h2 {
   margin:0 0 2em;
}

#sidebar {
   float:right;
   width:251px;
   padding:11px;
   border-left:2px solid Chartreuse;
}

a:link {
   color:yellow;
}

a:active {
   color:blue;
}

a:visited {
   color:pink;
}

a:hover {
   color:OrangeRed;
}

#footer {
   font-family:Arial;
   font-size:15px;
   width:100%;
   clear:both;
   border-top:2px solid grey;
   line-height:21px;
   margin-top:11px;
}

#footer p {
   padding-left:11px;
   margin:0;
}

* html #footer {
   height:2px;
}
</style> 
 </head> 
 <body> 
  <div id="nav"> 
   <ul> 
    <li> <a href="/">Lore</a> </li> 
    <li> <a href="/">Lorem</a> </li> 
    <li> <a href="/">Lorem ipsum</a> </li> 
    <li> <a href="/">Lorem</a> </li> 
    <li> <a href="/">Lore</a> </li> 
    <li> <a href="">Lorem </a> </li> 
    <li> <a href="">Lorem ips</a> </li> 
    <li> <a href="">Lorem </a> </li> 
    <li> <a href="">Lorem </a> </li> 
    <li> <a href="">Lorem ipsu</a> </li> 
   </ul> 
  </div> 
  <div class="header"> 
   <div class="center"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png"> 
   </div> 
  </div> 
  <div id="wrap"> 
   <div id="main"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" width="689" height="120"> 
    <img src="https://www.java2s.com/style/demo/Safari.png" width="689" height="120"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" width="689" height="120"> 
   </div> 
   <div id="sidebar">
     Lorem ips 
   </div> 
  </div> 
  <div id="footer"> 
   <p>Lorem ipsum do</p> 
  </div>  
 </body>
</html>

Related Tutorials