Setting up complex vertical margins (vertical margins) using the CSS sibling selector

-How adjacent sibling selectors maintain a readable CSS while completing complex design requirements

This is an example of a simple, but complex process that begins in the Web front-end development task: Apply the vertical margin (vertical margins) to all elements in an article, such as a blog post compiled by a complex markdown.

In most cases, you have to deal with many exceptions and correlations, such as: headings and images often require more whitespace, but if the two images are next to each other, the gap between the two graphs will change less. The H2 label and the H3 label have a direct distance of less than two H2.

When the original author started working on the front end a few years ago, all of these anomalies and dependencies always lead to complex code, visual inconsistencies, and unexpected behavior. Google a lot of back why Margin-top does not work.

The first step

A simple HTML is as follows:

<articleclass= "article">  <H1>Hello World</H1>  <P>Lorem ipsum dolor sit amet</P>  <P>Lorem ipsum dolor sit amet</P>  <imgsrc= "..."alt= "...">  <P>Lorem ipsum dolor sit amet</P>  <ul>    <Li>Lorem</Li>    <Li>Ipsum</Li>    <Li>Dolor</Li>  </ul>

I usually take out two paragraphs to adjust the vertical margin between them, and then use that value as the base margin for all the elements when the desired effect is reached.

{     margin-top: 1.5rem;}

The CSS code above adds margin-top to the child elements in. Article that all have adjacent sibling elements. Adding the Margin-top attribute to the immediate element avoids unwanted effects, such as that the UL in the above HTML will be added margin-top instead of Li.

Http://codepen.io/sebastianeberlein/pen/JWqbpX

Step Two

In this step, more specific CSS rules are added, such as:

{     margin-top: 3rem;}

Any element after IMG receives a specific margin-top, which is similar to applying margin-bottom directly to IMG. But using the adjacent sibling selector and the top of the edge has two advantages:

1. You do not have to remove margin-bottom from the last child process

2. And avoid folding margins (collapsing margins.)

Http://codepen.io/sebastianeberlein/pen/yMWVKr

Step Three

In this step, you add rules to specific elements, such as:

{     margin-top: 4rem;}  {     margin-top: 3rem;}

H2 and IMG with neighboring brothers will receive a specific margin-top.

Http://codepen.io/sebastianeberlein/pen/aJrBGd

Fourth Step

In this final step, I deal with styles that have special relevance.

{     margin-top: 1rem;}

Change the distance between adjacent pictures

Http://codepen.io/sebastianeberlein/pen/vxwyjJ

You can also add an exact CSS selector if needed, such as:

{     margin-top: 5rem;}

If a H2 is arranged in three consecutive images, it will receive a specific margin-top. Fortunately, this is only a special case, but it's nice to know that the neighboring sibling selector solves this complex dependency problem.

Advanced use

To improve readability, use (SCSS) nesting and writing each rule to one line. You do not need to group selectors with the same value, because Csso will handle it later in the build task.

. Article{> * + * {margin-top:1.5rem}> H2 + *{Margin-top:1rem}> img + *{Margin-top:3rem}> * + H2{Margin-top:4rem}> * + h3{Margin-top:3.5rem}> * + img{Margin-top:3rem}> img + img{Margin-top:1rem}> H2 + h3{Margin-top:4.5rem}}

This technique also applies to sass or CSS, such as a baseline grid. If all margin is calculated as a specified margin variable, you only need to change the variable to increase or decrease the overall whitespace.

Http://codepen.io/sebastianeberlein/pen/NpVbMO

Conclusion

Generally developed web sites often have very complex articles that include not only the descending of the compilation, but also the category headings, introduction text, or nested layout elements.
Using the adjacent sibling selector and the unique top of the border helps me to solve complex design requirements while maintaining understandable CSS rules. It is convenient to add or adjust rules later.

English Original: https://hackernoon.com/advanced-vertical-margins-4ac69f032f79

Setting up complex vertical margins (vertical margins) using the CSS sibling selector