Setting Position Of The Header Text Right Above The Other Content In Css

This issue is related to the topic mentioned here. I managed to fix my previous CSS code to get the effect of having text aligned to the middle of the picture, but now I would lik

Solution 1:

When you have a heading followed by a paragraph, there are (generally) no more than 4 style declarations that create a visible vertical gap between the heading and the paragraph. These 4 style declarations are (in order):

1) The padding-bottom of the heading;

2) The margin-bottom of the heading;

3) The margin-top of the paragraph;

4) The padding-top of the paragraph;

With more advanced layouts, declarations like line-height will also play a role, but we don't need to worry about that for now.

Therefore, if you want to ensure that there is zero visible gap between the second-level heading and the paragraph which follows it, you might declare the following rules:

h2 {
margin-bottom: 0;
padding-bottom: 0;
}

p {
margin-top: 0;
padding-top: 0;
}

Of course, if we leave it there, the style rules for the paragraph above will apply to all paragraphs. If we want these style rules to apply only to paragraphs which immediately follow an <h2>, then we can make the styles above slightly more explicit by declaring:

h2 {
margin-bottom: 0;
padding-bottom: 0;
}

h2 + p {
margin-top: 0;
padding-top: 0;
}

The + selector above indicates that the rules only apply to the element after the selector when it is the sibling which immediately follows the element before the selector.

Now that you have zero visible gap between the <h2> and the <p>, you can tweak your margins and paddings as appropriate.

Solution 2:

The answer to this lies in the answer I gave on the previous question. There's spacing because the browser applies it's own stylesheet.

Here's what firefox adds:

h2, *:-moz-any(article, aside, nav, section) h1 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em0;
}

You just need to add a style that overwrites the margin.

As I mentioned before, you can use a developer console either in Google Chrome, or by adding Firebug to Firefox. This will allow you to see what styles are being applied to which elements on the page, just by pressing F12.

Solution 3:

You must reduce the bottom margin of h2 (53px) and the top margin of

(16px)

h2 {
    font-weight: normal;
    font-size: 4rem;
    /* 64 */text-align: left;
margin-bottom: 0px;
}
p{
    margin-top: 2px;
}

Solution 4:

Inspect the code and you'll see a margin applied to your <h2> :

This is caused by default CSS value.

It is very recommended you add * {padding: 0; margin: 0;} to disable default padding/margin on every element, then you'll be able to add your own margins/paddings on whatever you want.