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.
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.
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.
There are several ways to prevent line breaks in content. Using 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.
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With