5 replies [Last post]
daffy_dowden
Offline
Regular
Northumberland, England
Last seen: 14 years 16 weeks ago
Northumberland, England
Joined: 2004-06-30
Posts: 28
Points: 0

Hi all,
Just a quick question.
How do you get rid of the gap that appears below the text when you place a <h1> tag?

Its the same as that which appears between 2 paragraphs.

ie <p>blah</p><p>blah2</p>

is there anyway to get rid of the line height gap that appears?

Cheers,
daffy

mkjoker
Offline
Regular
Dresden
Last seen: 18 years 4 weeks ago
Dresden
Timezone: GMT+1
Joined: 2004-09-01
Posts: 40
Points: 0

Heading and paragraph Gaps

in the css you type:

h1 {margin-bottom:0;}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Heading and paragraph Gaps

Hi daffy_dowden,
Many tags such as H and P have default margins that are controlled by the browser.
Each browser adds the amount of margin it thinks best around the elements.
You can specify how much margin the browser should display.
mkjoker's example shows how to remove margin from the bottom of a H1 element.
You may also need to remove or control margin from the top of the following P.

p{margin-top:0;} 

/* or specify exactly how much margin on each side of an element. 
 the order is clockwise from top, (top, right, bottom, left) */ 

p{margin:0 1em 0.5em 1em} 


http://www.csscreator.com/attributes/properties/margin

Hope that helps

daffy_dowden
Offline
Regular
Northumberland, England
Last seen: 14 years 16 weeks ago
Northumberland, England
Joined: 2004-06-30
Posts: 28
Points: 0

Heading and paragraph Gaps

Thanks for the reply guys, especially the link. Didn't know margins applied to other tags as well as the container boxes.

I've tried putting this code on my page but it doesn't seem to do anything, any ideas why?

In the CSS page

div#product h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin: 0px;
	width: 0px;
}

and
 <div id="content">
	<div id="product"><h1>Product 1</h1><h2>Semi blurb mini description</h2><p>Main blurb</p></div>
	<div id="product"><h1>Product 2</h1><h2>Semi blurb mini description</h2><p>Main blurb</p></div>
	<div id="product"><h1>Product 3</h1><h2>Semi blurb mini description</h2><p>Main blurb</p></div>
	<div id="product"><h1>Product 4</h1><h2>Semi blurb mini description</h2><p>Main blurb</p></div>
  </div>

on the main page, should the fact that it's specified to another container make a difference?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Heading and paragraph Gaps

id is unique and can only be used once per page, change #product to .product (class name) if needing to be used more than once.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

daffy_dowden
Offline
Regular
Northumberland, England
Last seen: 14 years 16 weeks ago
Northumberland, England
Joined: 2004-06-30
Posts: 28
Points: 0

Heading and paragraph Gaps

Ahh cheers,
I've removed all but one of the product tags, they weren't needed anyway, and it seems to work fine.

Thanks,
Daf

onto the next query....