Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 16, 2005, 05:36 AM   #1
cooknwitha
macrumors 6502a
 
cooknwitha's Avatar
 
Join Date: May 2005
Location: London
CSS line spacing between h2 and p

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.
__________________
13" Macbook Pro 2.9GHz, 8GB RAM, 750GB HD
cooknwitha is offline   0 Reply With Quote
Old Dec 16, 2005, 05:49 AM   #2
Mitthrawnuruodo
Demi-God (Moderator)
 
Mitthrawnuruodo's Avatar
 
Join Date: Mar 2004
Location: Bergen, Norway
In your css (or just in a style tag) set margin and padding to 0px for both h2 and p and they should get considerably closer...
__________________
Those who fail to learn history are doomed to repeat it; those who fail to learn history correctly... why, they are simply doomed.
Mitthrawnuruodo is offline   0 Reply With Quote
Old Dec 16, 2005, 05:57 AM   #3
cooknwitha
Thread Starter
macrumors 6502a
 
cooknwitha's Avatar
 
Join Date: May 2005
Location: 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.
__________________
13" Macbook Pro 2.9GHz, 8GB RAM, 750GB HD
cooknwitha is offline   0 Reply With Quote
Old Dec 16, 2005, 06:06 AM   #4
Mitthrawnuruodo
Demi-God (Moderator)
 
Mitthrawnuruodo's Avatar
 
Join Date: Mar 2004
Location: 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...
__________________
Those who fail to learn history are doomed to repeat it; those who fail to learn history correctly... why, they are simply doomed.
Mitthrawnuruodo is offline   0 Reply With Quote
Old Dec 16, 2005, 06:23 AM   #5
cooknwitha
Thread Starter
macrumors 6502a
 
cooknwitha's Avatar
 
Join Date: May 2005
Location: 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.
__________________
13" Macbook Pro 2.9GHz, 8GB RAM, 750GB HD
cooknwitha is offline   0 Reply With Quote
Old Sep 4, 2010, 12:53 PM   #6
viper5646
macrumors newbie
 
Join Date: Sep 2010
Thanks

I was having the same problem
viper5646 is offline   0 Reply With Quote
Old Sep 4, 2010, 10:10 PM   #7
Mal
macrumors 603
 
Mal's Avatar
 
Join Date: Jan 2002
Location: 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
__________________
The Bearded Nerd
13" MacBook Pro; 64GB iPod touch
"It's a real burn, being right so often."
NoiseTrade.com/Walker
Mal is offline   0 Reply With Quote
Old Sep 10, 2010, 03:06 PM   #8
Hermes Monster
macrumors 6502a
 
Hermes Monster's Avatar
 
Join Date: May 2010
Location: UK
Quote:
Originally Posted by Mal View Post
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
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.
Hermes Monster is offline   0 Reply With Quote
Old Sep 10, 2010, 04:17 PM   #9
angelwatt
Demi-God (Moderator emeritus)
 
angelwatt's Avatar
 
Join Date: Aug 2005
Location: Ohio
Quote:
Originally Posted by Hermes Monster View Post
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.
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.
angelwatt is offline   0 Reply With Quote
Old Sep 10, 2010, 05:57 PM   #10
manueld
macrumors regular
 
Join Date: Jun 2009
Quote:
Originally Posted by angelwatt View Post
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.
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.
manueld is offline   0 Reply With Quote
Old Sep 13, 2010, 12:32 PM   #11
Jason S.
macrumors 6502a
 
Join Date: Jul 2007
Location: Pennsylvania
Another way you can do this with the adjacent selector in CSS:

[HTML]
h2 + p {
padding: 0;
margin: 0;
}
[/HTML]

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).
Jason S. is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
thread Thread Starter Forum Replies Last Post
How to remove space between window and dock? StephenHuang Mac Basics and Help 12 May 3, 2011 09:10 AM
Space between AT&T and 3G SDAVE Jailbreaks and iOS Hacks 0 Aug 25, 2010 09:14 PM
unwanted space between header and body...(only shows up in IE) pelsar Web Design and Development 4 Aug 15, 2009 01:07 PM
Adding spaces between text lines thriftinkid Mac Programming 2 Apr 16, 2008 09:13 PM
Space between screen and bezel ChandlerXJ iPhone 6 Jul 24, 2007 12:29 PM


All times are GMT -5. The time now is 07:42 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

Privacy / DMCA contact / Affiliate and FTC Disclosure
Copyright 2002-2013, MacRumors.com, LLC