Space between text and heading : Logic section « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Logic section

Space between text and heading

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Space between text and heading</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 {
      font: bold 1.25em/1.5em Georgia, serif;
      margin: 0.8em 0 0 0;
    }
    h2 {
      font: bold 1em/1.5em Georgia, serif;
      margin: 0.75em 0 0 0;
    }
    p {
      margin: 0 0 0.75em 0;
      width: 33em;
    }
    h2.post-h1 {
      margin: 0.25em 0 0 0;
    }
  </style>
</head>
<body>
  <div>
    <h1>A very important heading</h1>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
    <h2>A less important heading</h2>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  </div>
  <div>
    <h1>Another important heading</h1>
    <h2>Immediately followed by another heading</h2>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  </div>
  <div>
    <h1>Another important heading</h1>
    <h2 class="post-h1">Immediately followed by another heading</h2>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  </div>
</body>
</html>








Related examples in the same category

1.Style for Logic Section
2.Separate the style by logic
3.Use class name more than once to format the same logic block
4.Using Headings to Structure Text
5.Header style
6.Header block border
7.Section header
8.CSS Positioning