Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Removing newline after <h1> tags?

I am having a problem with removing linebreaks after the <h1> tag, as everytime it prints, it adds a line break straight after it, so something like <h1>Hello World!</h1> <h2>Hello Again World!</h2> prints out like this:

Hello World!  Hello Again World! 

I am unsure on what tags I need to change in CSS, but I expect it's something to do with the padding or margins

I also want to keep the vertical padding if at all possible.

like image 244
Jack Wilsdon Avatar asked Feb 20 '12 12:02

Jack Wilsdon


People also ask

How can we prevent h1b from New Line?

Use white-space:nowrap; to achive what you are looking for. Show activity on this post. The style="display:inline" had to be in both neighboring H tags for it to work.

How do you prevent a line break with an h1 h2 H3 tag?

You may want to format header tags like H1 and H2 as inline and prevent a break straight after them. Removing padding and margin does not remove the new line. By default, header tags take up all the horizontal space where they appear.

How do you stop a new line in HTML?

There are several ways to prevent line breaks in content. Using &nbsp; is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.

How do you stop a line break?

Use white-space: nowrap; or give that link more space by setting li 's width to greater values. I prevented line break in li items using display: inline; . Maybe this will also help others with similar problems. Its important to be careful with display: inline as it can have side effects.


Video Answer


1 Answers

Sounds like you want to format them as inline. By default, h1 and h2 are block-level elements which span the entire width of the line. You can change them to inline with css like this:

h1, h2 {     display: inline; } 

Here's an article that explains the difference between block and inline in more detail: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

To maintain vertical padding, use inline-block, like this:

h1, h2 {     display: inline-block; } 
like image 107
Ben Lee Avatar answered Sep 19 '22 15:09

Ben Lee