CSS selectors (H1 - H6 applying after p)

Asked

Viewed 187 times

1

I’m in doubt of applying some effects to css. I tried with the following css selectors:

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
    margin: 0 0 0.75em 0;
}

h1~p, h2~p, h3~p, h4~p, h5~p, h6~p {
    margin: 0 0 0.75em 0;
}

h1>p, h2>p, h3>p, h4>p, h5>p, h6>p {
    margin: 0 0 0.75em 0;
}

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
    margin: 0 0 0.75em 0;
}

The idea is that after typing the TAG <h6></h6> apply a space to enter the TAG <p></p>, within a text structure <div></div> for example;

Because I already use the space between TAG’s <p></p> and only need to <h1><h6>.

css tags selectors

  • Can you explain better ? How so space to type a paragraph tag ?

  • Well after I typed, he automatically made room for the paragraph: <h6>Subtitulo</h6> -Space- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolorum non, ab quisquam consequatur ullam necessitatibus in sit placeat aperiam!</p>

  • 1

    They are both tags with spacing after content, the only difference is that tags h define headers and tag p define paragraphs, at least you would have to remove tag spacing h6 using margin:0; and then use h6+p { margin:.75em 0 0 0; }.

1 answer

1


I think there has been a mistake, the attributes inside the selector will be applied in the paragraph and not in H1~H6, so instead of margin bottom the correct one would be margin top:

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
    margin: 0.75em 0 0 0;
}

or else, to be clearer:

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
    margin-top: 0.75em;
}

Documentation on combinators: here.

  • I liked the reference, but not yet applied the effect, I wanted to do in the TAG this space than use the style in the first <p></p>, using the margin-top in this case.

  • Sorry, it worked, I was applying a very low measure, thank you for the reference.

Browser other questions tagged css tags selectors

You are not signed in. Login or sign up in order to post.