Removing Line Breaks/Space Before/After H1 tags
Header Tags (h1,h2,h3,h4,h5,h6) produce a space/break above and below the enclosed text. Sometimes this is not desireable. To remove the space from below the tag use this in the CSS file:
h1,h2,h3,h4,h5,h6{
margin-bottom: 0px;
padding-bottom: 0px;
}
Similarly, the code for removing the space from above a H1 tag:
h1,h2,h3,h4,h5,h6{
margin-top: 0px;
padding-top: 0px;
}
Of course, these two can be combined to remove the space from both above and below a H1 tag. Remember, shorthand can be used to accomplish this.
Posted by Paul Flyer on Friday, January 6th, 2006 in Web Development
h1,h2,h3,h4,h5,h6{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
chris Says:
April 29th, 2006 at 2:24 pm
Thanks for the tip!
Ryan Says:
September 24th, 2006 at 4:18 pm
More compatible – with browsers.
h1,h2,h3,h4,h5,h6 {
display: inline;
}
Paul Flyer Says:
September 25th, 2006 at 9:19 am
Thanks for the additional info Ryan.
Ben Says:
March 26th, 2009 at 2:27 am
Ryan – thanks SO MUCH. Have really been having problems with this – and your answer got it sorted straight away. Thanks!
Apul Gupta Says:
June 5th, 2009 at 3:05 am
Very Thanks for solution.
Bilal Says:
June 16th, 2009 at 11:05 pm
Thanks for the information…Kool
Stan Hansen Says:
June 30th, 2009 at 1:11 pm
Oh Thank You!! I could never figure this out.
Ben Says:
July 9th, 2009 at 1:57 pm
Thank you Thank you Thank you!!!!!!!!!
Juan Says:
September 16th, 2009 at 2:27 pm
Awesome, this is something that I never had to mess with before. Your page came in and saved the day! Thanks for the tips.
Murray Says:
September 22nd, 2009 at 5:17 pm
Thanks guys.
I am having fun with CSS and this solves a problem for me even after all this time.
So much to learn and so little time to do it in.
Murray
Beeip Says:
November 6th, 2009 at 11:20 am
Genius. Saved me probable hours of frustration.
Tim Hawkins Says:
November 19th, 2009 at 4:52 am
ok so what your saying is simply padding:0 margin:0!?!
What about actually remove the line break though so the text flows like it’s part of the same sentance?
Tim Hawkins Says:
November 19th, 2009 at 5:23 am
inline:display – take out the actual line break!
Charles Bronson Says:
January 21st, 2010 at 1:52 pm
Just what I was looking for. Thanks!
dan Says:
January 25th, 2010 at 3:25 pm
@ryan awesome.. display:inline; is perfect!
Red Says:
April 8th, 2010 at 11:22 pm
Many thanx!
kleinbaas Says:
April 13th, 2010 at 3:32 am
If you have tried all these suggestions without a result (like I did) try putting this:
* {
margin: 0;
padding: 0;
}
in your CSS file.
Then use padding: bla bla bla bla; to define the spaces you want in-between H1, H2 and Paragraphs. See http://www.searchourworld.com for the results.
Hope that helps.
Sanjeev Says:
May 24th, 2010 at 5:48 am
Thank you. Just what I was looking for. its very help full
gem Says:
July 1st, 2010 at 2:43 pm
thats great. but it removes my align left formating for my heading.
IMPACT : HOME
how do I display heading inline and aligned to the left?
thanks
gem
gem Says:
July 1st, 2010 at 2:47 pm
Just answered my own question. If you use
h1,h2,h3,h4,h5,h6{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
you can align text left.
display : inline – means you cann’t.
Gem