Blank spaces above and below my title

[readingclark]

I'm quite the noob when it comes to coding, I can typically figure it out if I stare at it long enough - but this issue is hiding from me, I'm afraid.

There are very large and annoying white blank spaces above and below the title of my website.

Take a look, and see if you can find it. I'd be very grateful!


This is the CSS:

/* Body */

body {
	background: #fff;
	color: #666666;
	font: 12px/1.5 Helvetica, Arial, sans-serif;
	margin: 0px;
	padding: 50px;
	width: 760px;
}

/* Links & Typography */

a {
	text-decoration: none;
}

a:link, a:active {
	color: #5691CD;
}

a:visited {
	color: #5691CD;
}

a:link:hover, a:active:hover, a:visited:hover {
	text-decoration: underline;
}

a:link:hover, a:active:hover {
	color: #5691CD;
}

a:visited:hover {
	color: #5691CD;
}

a > img {
	margin-bottom: -1px;
}

a.img {
	border: none;
	background: transparent !important;
}

blockquote {
	width: 500px;
	padding-left: 10px;
	border-left: 3px solid #333;
}

strong, b {
	font-family: helvetica, sans-serif;
	color: #333;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

.post h1 { font-weight: bold; margin: 20px 0 10px; font-size: 22px }

.post h2 { font-weight: bold; margin: 20px 0 10px; font-size: 18px;}

.post h3 { font-weight: bold; margin: 20px 0 10px; font-size: 16px }

.post h4 { font-weight: bold; margin: 20px 0 10px; font-size: 14px }

/* Description */

.blog-description {
	font: 14px/1.5 Georgia, Helvetica, Arial, sans-serif;
}

/* Menu */

#menu {
	margin-top: 3px;
	height: 50px
}

#menu a {
	display: block;
	float: left;
	margin-right: 20px;
	padding-bottom: 25px;
}

#menu a.active {
	border-bottom: 1px solid #ccc
}


/* Post & Page */

.post {
	margin: 0;
}

.content {
	clear: both;
	margin: 50px 0 100px 0;
	width: 920px;
}

.archive-content {
	clear: both;
	margin: 20px 0 40px;
	width: 920px;
}

.archive-title {
  margin: 0;
}

.archive-title h3 {
  margin: 0;
}

.archive-divider {
  margin-top: 120px;
}

.divider_0 {
  margin-top: 50px;
}
 
.title {
	margin-bottom: 15px
}

.body-post {
	float: left;
	margin-left: 20px;
	font: 14px/1.5 Georgia, Helvetica, Arial, sans-serif;
}

.body-page {
	font: 14px/1.5 Georgia, Helvetica, Arial, sans-serif;
}

.body-post img, .body-page img {
	max-width: 760px;
	height: auto;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 20px
}

.body-post p, .body-page p {
	margin-top: 0;
	width: 500px;
}

.body-post li, .body-page li {
	margin-top: 0;
	width: 500px;
}

.meta {
	width: 110px;
	float: left;
	margin-top: 2px;
	padding: 0;
}

.introduction {
	border-top: 1px solid #ccc;
	float: left;
	margin-top: -0.1em;
	padding: 1.5em 0 .5em;
	width: 110px;
	margin-right: 85px;
}


pre {	
  max-width: 500px;
}

code {	
  max-width: 500px;
}

ul.tags {
  width: 460px;
  border-top: 1px solid #ccc; 
  margin: 20px 0;
  padding: 20px 0;
}
 
  ul.tags li {
    list-style: none;
  }
 
    ul.tags li a {
      margin: 0 15px 0 0; 
      float: left; 
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;    
    }

/* Lists */

ul {
	margin: 0;
	padding: 0
}

li {
	list-style-type: square;
	color: #333;
	margin-top: 20px;
	margin-bottom: 0;
}


/* Share buttons */

.share-buttons {
  border-top: 1px solid #ccc; 
  margin: 20px 0;
  padding: 20px 0;
}

.share-buttons > .share-facebook, .share-buttons > .share-twitter, .share-buttons > .share-gplus {
  opacity: .5;
}


.share-buttons:hover > .share-facebook, .share-buttons:hover > .share-twitter, .share-buttons:hover > .share-gplus {
  opacity: 1
}

.share-twitter, .share-gplus {
  float: left;
}
.share-facebook {
  margin-right: 25px;
  float: left;
}


/* scriptogr.am link 
** 
** Please do not remove or hide the footer link.
** This link will keep us alive and motivated to continue our service.
*/

.scriptogram-link {
	position: fixed;
	right: 50px;
	bottom: 50px;
	font-size: 9px;
}

  .scriptogram-link a {
    color: #666666;
  }
  

/* Google Prettify */

.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #268bd2; }
.kwd, .tag { color: #195f91; }
.typ, .atn, .dec, .var { color: #CB4B16; }
.pln { color: #93a1a1; }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  margin: 0 0 0 40px;
}
/* IE indents via margin-left */
ol.linenums li {
  padding: 0 5px;
  color: rgba(0,0,0,.15);
  line-height: 20px;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 {  }


/* DARK THEME */
/* ---------- */

.prettyprint-dark {
  background-color: #1d1f21;
  border: 0;
  padding: 10px;
}
.prettyprint-dark .linenums li {
  color: #444;
}
.prettyprint-dark .linenums li:hover {
  background-color: #282a2e;
}
/* tags in html */
.prettyprint-dark .kwd,
.prettyprint-dark .tag { color: #cc6666; }
/* html attr */
.prettyprint-dark .typ,
.prettyprint-dark .atn,
.prettyprint-dark .dec,
.prettyprint-dark .var { color: #de935f; }
/* html attr values */
.prettyprint-dark .str,
.prettyprint-dark .atv { color: #b5bd68; }

And this is the HTML:

<!DOCTYPE html> 
<!--
modified scriptogr.am theme
-->
<html lang="en">
<head>
  <style type="text/css">
@font-face {
    font-family: "Valencia";
    src: url(http://dl.dropbox.com/u/56581897/ValenciaRegular.otf) format("truetype");
}
p.customfont { 
    font-family: "Valencia", Verdana, Tahoma;
      font-size:115px;
}
   @font-face {
    font-family: "pixelicious";
    src: url(http://dl.dropbox.com/u/56581897/Pixelicious.ttf) format("truetype");
}
p.customfont2 { 
      font-family: "pixelicious", Verdana, Tahoma;
      font-size:2px;
      }
</style>
  <script language="javascript">
// (c) Premshree Pillai
// http://www.qiksearch.com
// premshree@hotmail.com
// Use freely as long as this message is intact.
var msg = "mark clark · writer/blogger · ";
var pos = 0;
var spacer = "";
var time_length = 100;
function ScrollTitle()
{
 document.title = msg.substring(pos, msg.length) + spacer + msg.substring(0, pos);
 pos++;
 if (pos > msg.length) pos=0;
 window.setTimeout("ScrollTitle()",time_length);
}
ScrollTitle();
</script>
  <title></title>
  <meta name="description" content="{{author}} {{blog_title}}" />
  <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0;">
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="ROBOTS" content="INDEX,FOLLOW">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <meta name="description" content="{{author}} |*{{blog_title}}">
  <meta property="og:url" content="{{home_link}}">
  <meta property="og:site_name" content="{{author}} on scriptogr.am">
  <link rel="shortcut icon" href="http://scriptogr.am/lib/img/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{base_url}}/feed" />
  <link href="/themes/reset.css" type="text/css" rel="stylesheet">
  {{css}}
</head>
<body>
<div class="wrapper">
    <div class="blog">
<p class="customfont">ReadClark.com</p>
      <div id="menu">
        {{#pages}}
        <a href="{{permalink}}">{{title}}</a>
      {{/pages}}
      </div>
 
      <div class="container">
      {{#posts}}
     
       <!-- index -->
       {{#is_index}}
        <div class="post">
          <div class="content">
            <div class="title"><h3><a href="{{permalink}}">{{title}}</a> {{#post_permalink}}<a href="{{post_permalink}}">#</a>{{/post_permalink}}</h3></div>
            {{#date}}
            <div class="meta">
              <span class="date"><p class="customfont2">{{prettydate}}</p></span>
            </div>
            {{/date}}
            <div class="body-post">
              <!--if excerpt-->
              {{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
              <!--endif-->
              {{content}}
              <!-- if tags -->
              {{#if_tags}}
              <ul class="tags">
                {{#tags}}
                  <li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
                {{/tags}}
              </ul>  
              {{/if_tags}}
              <!-- endif -->
            </div><!--end body-->
          </div><!--end content-->
          <div class="clear"></div>
        </div><!--end post-->
      {{/is_index}}

      <!-- post permalink -->
      {{#is_post}}
        <div class="post">
          <div class="content">
            <div class="title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
            {{#date}}
            <div class="meta">
              <span class="date">{{prettydate}}</span>
            </div>
            {{/date}}
            <div class="body-post">
              <!--if excerpt-->
              {{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
              <!--endif-->
              {{content}}
              <!-- if tags -->
              {{#if_tags}}
              <ul class="tags">
                {{#tags}}
                  <li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
                {{/tags}}
              </ul>  
              {{/if_tags}}
              <!-- endif -->
              <!-- social buttons -->
               <div class="share-buttons">
                <div class="share-twitter">
                  <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{permalink}}" data-via="scriptogram">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>             
                 </div>
                <div class="share-facebook">
                  <div class="fb-like" data-href="{{permalink}}" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-font="arial"></div>
                </div>
                <div class="share-gplus">
                  <g:plusone size="medium" href="{{permalink}}"></g:plusone>
                 </div>
               </div>
            </div><!--end body-->
          </div><!--end content-->
          <div class="clear"></div>
        </div><!--end post-->
      {{/is_post}}
      <!-- endif -->

      <!-- page permalink -->
      {{#is_page}}
        <div class="post">
          <div class="content">
            <div class="title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
              <div class="body-page">
              <!--if excerpt-->
              {{#excerpt}}<span class="introduction">{{excerpt}}</span>{{/excerpt}}
              <!--endif-->
              {{content}}
              <!-- if tags -->
              {{#if_tags}}
              <ul class="tags">
                {{#tags}}
                  <li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
                {{/tags}}
              </ul>  
              {{/if_tags}}
              <!-- endif -->
            </div><!--end body-->
          </div><!--end content-->
          <div class="clear"></div>
        </div><!--end post-->
      {{/is_page}}
      <!-- endif -->
    
      <!-- archive -->
      {{#is_archive}}
        <div class="post">
          {{#archive_divider}}<div class="archive-divider {{archive_divider_index}}"><h2>{{archive_divider}}</h2></div>{{/archive_divider}}
          <div class="archive-content">
            <div class="archive-title"><h3><a href="{{permalink}}">{{title}}</a></h3></div>
            <div class="meta"><span class="date">{{prettydate}}</span></div>
          </div><!--end archive-content-->
          <div class="clear"></div>
        </div><!--end achive-->
      {{/is_archive}}
      
    {{/posts}}
    <div class="pagination">{{pagination}}</div>
    </div><!-- end container -->
  </div><!-- end blog -->
</div><!-- end wrapper --> 
<div class="scriptogram-link"><a href="http://readclark.com/" Title="Created by Mark Clark">© Mark Clark 2012</a> / <a href="http://scriptogr.am/" title="built with scriptogr.am." >scriptogr.am</a></div>
<div id="fb-root"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/themes/{{theme}}/app.js"></script>
<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=241164325961701";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>

This is the website I'm talking about. I've linked you to a "test" page.

Thanks again!

[Arbitrator]

Originally Posted by readingclark

There are very large and annoying white blank spaces above and below the title of my website.

You didn't provide all of your CSS.

In http://readclark.com/themes/reset.css, you've specified the following rule:

p, ul, ol, pre, blockquote, hr, object { margin: 1em 0; }

Note that major browsers, by default, provide for a top and bottom vertical margin of 1 em on p elements, so simply eliminating this rule will not do the trick. You will need to explicitly specify margins on your p element to eliminate the relevant margins:

p.customfont { margin: 0; }

It's worth noting that the correct elements to specify general headings (including your title) are h1, h2, h3, h4, h5, and h6:

CSS

h1.customfont { margin: 0; font-size: inherit; }

HTML

<h1 class="customfont">readclark.com</h1>

Also, I would note that your title element animation script prevents proper bookmarking of your site and makes the title's existence dependent on scripting. This means that your document will not have a title in, for example, a search engine.

[readingclark]

Ah! Thank you so much! I will be implimenting this tomorrow! I will also get rid of the title animation, haha. I thought it looked fancy XD

Im not sure what's going on with the header tags...I'm actually just modifying an existing theme from scriptogram (that is where I host my domain.)

Thanks again!