Controlling gap between h4 and p without using negative margin

waydown · Nov 26, 2011

Hi,
How can I reduce (and control) the gap between the word "Art" and the lower edge of the blue background of h4. The only way I can think of using negative top margin for p but I feel this is incorrect. There must be a better (correct) way of doing it. Will be grateful for all help.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>Test Page</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p{
margin:0;
padding:0
}
img { border:none }
a{color:#000;text-decoration:none}
a:hover { text-decoration: underline; }
body {
color:#000;
font-family:Verdana, Geneva, sans-serif;
}
#wrap {
min-width: 71.08em;
margin:auto;
overflow:hidden;
}
#left 
{  position: relative;
   width: 17.38em;
   float: left;
   padding-top: 16.86em;   
   padding-bottom: 2.2em;
   border: 0.125em solid #FF0000;
}
#left h4, #left p
{  font-family: Tahoma;
}
#left h4
{  background-color: #87CEEB;
   font-size: 1.13em;
   text-align: left;
   font-weight: bold;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
#left p
{  font-size: 1em;
   color: #000080;
   line-height: 110%;
   word-spacing: 0.125em;
   padding: 0em 0.9em 0em 0.9em;
}
#left p a span
{  font-size: 19px;
   font-weight: bold;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="left"> 
      <h4>&nbsp;&nbsp;&nbsp;&nbsp;SEARCH BY CATEGORY</h4>
      <p><a target="_blank" href="#">
            <span><br><br><br>Art<br></span></a>
       <a target="_blank" href="#">Posters and Prints</a>,
       <a target="_blank" href="#">Photos and Images</a>,
       <a target="_blank" href="#">Hobby and Craft</a>
         ............
      </p>
    </div>
</div>
</body>
</html>

ChrisHirst · Nov 26, 2011

And the page where we can see this problem is at???

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

vacunita · Nov 26, 2011

@Chris
What? You can't copy the code to a file and see the results in a browser?

@waydown
Anyway, why don't you try removing all those line breaks '<br>" in the span that's holding the "Art" text? With those out of the way, you can either set the padding or the margin for either the span or the <p> tag there.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

darryncooke · Nov 26, 2011

also don't forget to close your <br /> tags

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

ChrisHirst · Nov 27, 2011

What? You can't copy the code to a file and see the results in a browser?

I certainly could do that. HOWEVER:

Having done said task on several occasions, only to find that what code the OP supplied in the thread was not actually a direct copy and paste from the problem page, and after several Q&A posts it transpired that the problem was in some code that had NOT been posted but was in the page code.

So now I prefer not to waste my time playing ping-pong with posts and would rather see the "problem" first hand.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

FrankknarF · Nov 27, 2011

The only way I can think of using negative top margin for p but I feel this is incorrect. There must be a better (correct) way of doing it.

There is:

Code:

p:first-child {
    margin-top: 0;
}

Not supported by older IE's, but they did not give the first paragraphs a margin-top by default, so this is a cross-browser solution. Actually, all style sheets should contain this, to even out browser rendering.

How to: Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Controlling gap between h4 and p without using negative margin

waydown

Programmer

ChrisHirst

IS-IT--Management

vacunita

Programmer

darryncooke

Technical User

ChrisHirst

IS-IT--Management

FrankknarF

Programmer

Similar threads

Part and Inventory Search

Sponsor