(+84) 463.28.7979

How to remove line breaks after H1 tags using CSS


One of the most effective SEO techniques is to use the H1 tag for highlighting titles on a page. But a default or customized H1 tag comes with an extra line break that may not look good on the screen especially when you have some content immediately it.

Take for example a story title and the next line is the publication date with the author name. If we use the H1 tag for the title and immediately after the publication stuff is displayed, the output will show a lot of gab between the title and the publication stuff, which would be the same as between the publication data and content which might look odd.

There is however a simple way to get rid of the extra line spaces when using H1 tag. This can be applied to any other tags that replicate the same problem.

The solution is very simple and effective on all browsers, we make use of the display:inline; for H1 tag.

Here is how the CSS would look like

h1 {
display: inline;
}

Once you use this in your design you will need to manually add a line break ( BR ) after the H1 tag as now the H1 title and the publication date will be on the same line. With a manual single line break after the H1 tag your page will look good with no extra space around the H1 tag.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>