Removing Line Breaks/Space Before/After H1 tags

By · 34 Comments

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.


h1,h2,h3,h4,h5,h6{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

From the comments below, the most elegant solution is:


h1,h2,h3,h4,h5,h6 {
display: inline;
}

Thank you everyone for your input!

Web Development Tutorials to Increase Your Skills

Seeking to improve your HTML and CSS skils? The resources below can help you become a better web developer and designer and help you make your website superior to your competitors:

  • Learn CSS3: In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries.
  • XHTML and HTML Essential Training: Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site
  • Learn HTML5: Author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future.
  • The Complete Web Designer: Ten modules/courses compiled to teach you everything you need to know to become a commercial web designer. Hands-on practical training that simplifies and targets the key techniques needed to build modern web sites. Training from experienced web designers who KNOW what is required in the real world of web design
  • The Complete Web Developer: With so many languages and technologies out there, it is really hard for someone to know what to study and in what order - especially if you want to be able to make a living at it! Course focuses on using PHP and MySQL. The Complete Programmer package is designed to guide you along to the way, step-by-step, towards becoming a professional web programmer.
 

About the Author

Paul Flyer loves to research the web and find resources and tools for building, maintaining and promoting websites. Based in Saint Louis, MO, he works in management and spends his free time sharpening his web development and copy writing skills. Feel free to contact Paul with any questions, comments or ideas. He is also available to help you with your own website.

Visit Paul Flyer's Website