No, the CSS positioning that you have in your style is going to mess things up, coupled with the spacing that the h4 and p tags force on your layout too. I would skip the h1 and p and I and use CSS instead. Like this:
<div id="header">
<div id="logo">
<a href="#">mywebsite.com</a>
</div>
<div id="motto">
your witty motto
</div>
</div>
Now, in your CSS you can do something like this:
<style type="text/css">
#logo { font-size:175%; font-color:#333; font-family: sans-serif; padding-top: 8px;
padding-bottom: 1px; margin-bottom: 1px; }
#motto { font-size:120%; font-color:#333; font-family: sans-serif;
padding-bottom: 8px; padding-top: 1px; margin-top: 1px; }
</style>
See what I'm doing? Let the CSS do all the spacing and line height work and you'll find that you have complete control over your spacing. Further, recall that margin AND padding control the space around the contents of a container like "div", so you need to tweak it below the top one AND above the bottom one.
Try that, see if it helps you get where you want. Note, however, that if you make your URL clickable then you have a more complicated issue with formatting because you can't just use the formatting in the ID, but need to touch the style itself. Quite doable, but more tricky...
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
You should use h1 and h2 instead of divs. It is more semantic and can give the same result.
<div id="header>
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
then in ou stylesheet use the following selectors: #header h1, and #header h2. You shouldn't need #header if you correctly use h3, h4, h5, h6... for the next titles in your site.
You may have to reset margin and padding of h1 and h2 and other elements to zero before setting your own as different web browsers behave differently with default values...