Removing newline after <h1> tags?

HtmlCssHeaderStylesStylesheet

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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;
}

Solution 2 - Html

<h1> tags have {display: block} set. They are block-level elements. To turn this off:

{display: inline}

Solution 3 - Html

I just solved this problem by setting h1 margin value to minus in html style section. It works perfecly for my needs.

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

Solution 4 - Html

<style>
h1 {
    padding: 0px;
    margin: 0px;
}
</style>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJack WilsdonView Question on Stackoverflow
Solution 1 - HtmlBen LeeView Answer on Stackoverflow
Solution 2 - HtmltkoneView Answer on Stackoverflow
Solution 3 - HtmlJacekView Answer on Stackoverflow
Solution 4 - HtmlHamida AlmangushView Answer on Stackoverflow