Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS line spacing between h2 and p

cooknwitha

cooknwitha

macrumors 6502a
Original poster
May 5, 2005
562
0
London
I'll try and make this logical as I can manage. Is it possible in CSS code to make the spacing between an h2 and a p field to appear like it's only being separated by a <br>?

Hello, I'm an H2 Heading

And I'm a P field. See how I have a gap??

- - - -

I would like this to be the H2 heading
And for this to be the p field.

Am I making any sense? Obviously I can make the h2 lines p and manipulate them with the <span> command that but I'm trying to keep my code as simple as possible and trying to control appearance from one CSS file.

I hope I'm making sense. I'm a little muddled in the head at the moment. :)
 
cooknwitha

cooknwitha

macrumors 6502a
Original poster
May 5, 2005
562
0
London
You, Mitthrawnuruodo, are a champion!! I think I tried almost every combination with padding and margin except that! I wanted it to go

HEADING
Para Para Para Para Para Para Para
Para Para Para Para Para Para Para
Para Para Para Para Para Para Para

HEADING
Para Para Para Para Para Para Para
Para Para Para Para Para Para Para
Para Para Para Para Para Para Para

And I've now achieved that with:
Code: 
h2 {
	padding:0px;
	margin:0px;
	}
p {
	padding:0px;
	margin-top:0px;
	}

Thank you so so much! That's going to save me a lot of trouble. :)
 
Mitthrawnuruodo

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
14,424
1,064
Bergen, Norway
No problem... just glad to help... :)

I've never understood why the h-tags and p-tag has all that margin by default... that's just <mumble /> stupid... :rolleyes:
 
cooknwitha

cooknwitha

macrumors 6502a
Original poster
May 5, 2005
562
0
London
I agree. I'm in the process of changing my old Flash-based website into HTML with CSS and I love the flexibility of it. But the gaps between the h tags were driving me insane. But now I've fixed that. :)

CSS is great though. I had no idea it was so flexible. Not a table to be seen. Not to mention relatively simple to understand.
 
Mal

Mal

macrumors 603
Jan 6, 2002
6,252
18
Orlando
Sounds like a CSS reset would be of use to you. It's set of CSS rules that are often loaded as a separate file, or appended to the beginning of your CSS stylesheet, which sets margin, padding, etc, to 0 for all tags. Google "CSS reset" to find a couple options that will work well.

jW
 
Hermes Monster

Hermes Monster

macrumors 65816
May 4, 2010
1,204
552
UK
Mal said:
Sounds like a CSS reset would be of use to you. It's set of CSS rules that are often loaded as a separate file, or appended to the beginning of your CSS stylesheet, which sets margin, padding, etc, to 0 for all tags. Google "CSS reset" to find a couple options that will work well.

jW
Click to expand...

the reset css is a nice idea, but can sometimes cause work in the long run (as I've just found out after inheriting a website!) when coming to add margins etc later on.
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Hermes Monster said:
the reset css is a nice idea, but can sometimes cause work in the long run (as I've just found out after inheriting a website!) when coming to add margins etc later on.
Click to expand...

You should be manually setting the CSS properties for elements though as browsers are not consistent in the properties they employ. It's the whole reason for having the reset. It may seem like more work, but it's much easier than tracking some obscure difference between browsers later.
 
M

manueld

macrumors 6502
Jun 8, 2009
257
3
angelwatt said:
You should be manually setting the CSS properties for elements though as browsers are not consistent in the properties they employ. It's the whole reason for having the reset. It may seem like more work, but it's much easier than tracking some obscure difference between browsers later.
Click to expand...

I completely agree, it's much easier to set your properties for elements rather than the various browser default stylesheets that can cause way too many headaches. I personally use Eric Myers Reset.
 
J

Jason S.

macrumors 6502a
Jul 23, 2007
504
1
Pennsylvania
Another way you can do this with the adjacent selector in CSS:

HTML: 
h2 + p {
	padding: 0;
	margin: 0;
	}

Basically, this will apply the style to the <p> tag ONLY if it comes directly after a <h2> tag. So now if you were to use another heading tag, such as <h1> or <h3> you can style those however you want (for example, if you don't want the heading and paragraph to be close).
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom