TIME NOW
World current time now,
CALENDAR
Calendar monthly, yearly
login GOLD PRICE, RATE
login HOROSCOPE
login DICTIONARIES, LISTS
login SCIENCE EDUCATION RELIGION
login FINANCE, BUSINESS
login WORLD COUNTRIES, WIKI

HTML code examples, samples, tutorial

Previous articlePage bottomNext article  ALL TOPICS

HTML. CSS lessons. Padding and margin: left top bottom right, negative

 Margin example:
<html>
   <head>
      <title>My page- name of my site</title>
      <style>
      div {     
              width: 200px;  
              text-align: center;    
              background-color: red;    
      }
      
      #a {margin-left: 10px;  background-color: #999999;}
      #b {margin-right: 10px;  background-color: #EEEEEE;}
      #c {margin-top: 10px;  background-color: #BBBBBB;}
      #d {margin-bottom: 10px;  background-color: #BBBB00;}
      #e {margin: 10px 10px 10px 10px;  background-color: #00BBBB;}
      
      </style>
  </head>
  <body>
      <h1>My page</h1>
      Data shown on page (tables, text, images, links)
      <div id = a >Text Text A</div>
      <div id = b >Text Text B</div>
      <div id = c >Text Text C</div>
      <div id = d >Text Text D</div>
      <div id = e >Text Text E</div>
      <div id = f >Text Text F</div>
      
  </body>
</html>

Padding example:
<html>
   <head>
      <title>My page- name of my site</title>
      <style>
      div {     
              background-color: red;    
              width: 200px;  
              text-align: left;        
      }
      
      #a {padding-left: 10px;  background-color: #AAAAAA; }
      #b {padding-right: 10px;   background-color: #EEEEEE;}
      #c {padding-top: 10px;  background-color: #000099;}
      #d {padding-bottom: 10px;   background-color: #666600;}
      #e {padding: 10px 10px 10px 10px;   background-color: #999900;}
      
      </style>
  </head>
  <body>
      <h1>My page</h1>
      Data shown on page (tables, text, images, links)
      <div id = a >Text Text A</div>
      <div id = b >Text Text B</div>
      <div id = c >Text Text C</div>
      <div id = d >Text Text D</div>
      <div id = e >Text Text E</div>
      <div id = f >Text Text F</div>
      
  </body>
</html>

Margin example- negative:
<html>
   <head>
      <title>My page- name of my site</title>
      <style>
      div {     
              background-color: red;    
              width: 100px;
              height: 100px;  
              text-align: center;        
      }
      #a {background-color: red;}      
      #b {margin-left: 10px; margin-top: -50px; background-color: blue;}
 
      
      </style>
  </head>
  <body>

      <div id = "a" >Text Text A</div>      
      <div id = "b" >Text Text A</div>
          
  </body>
</html>

Padding example- negative. Negative padding don't work:
<html>
   <head>
      <title>My page- name of my site</title>
      <style>
      div {     
              background-color: red;    
              width: 100px;
              height: 100px;  
              text-align: center;        
      }
      #a {background-color: red;}      
      #b {padding-left: 10px; padding-top: -50px; background-color: blue;}
 
      
      </style>
  </head>
  <body>

      <div id = "a" >Text Text A</div>      
      <div id = "b" >Text Text A</div>
         
  </body>
</html>

Margin property with table and div:
<html>
   <head>
      <title>My page- name of my site</title>
      <style>

      div {     
              background-color: red;    
              width: 100px;  
              text-align: center;        
      }
      
      td { background-color: green; }

      #a { margin: 50px 50px 50px 50px; }  
      
      </style>
  </head>
  <body>
      <table align = "center">
      <tr>
      <td>
      <div id = "a" >Text Text A</div>
      </td>
      </tr>
      </table>
      
      <table align = "center">
      <tr>
      <td>
      <div>Text Text A</div>
      </td>
      </tr>
      </table>
      
  </body>
</html>
 
Previous articlePage topNext article  ALL TOPICS



 Use username: Guest, Anonymous, Programmer






QUOTES:
Many times a day I realize how much my own life is built on the labors of my fellowmen, and how earnestly I must exert myself in order to give in return as much as I have received.
Albert Einstein
To a father, when a child dies, the future dies; to a child when a parent dies, the past dies.
Red Auerbach
It is your attitude at the beginning of a task that determines success or failure.
Corrine Dewlow