Use the CSS sibling selector to design the complex vertical margin (vertical margins), verticalmargins

Use the CSS sibling selector to design the complex vertical margin (vertical margins), verticalmargins

------------------- How the sibling selector maintains CSS readability while fulfilling complex design requirements

This is one of the complex examples of simple and gradual changes in web Front-end development: Applying vertical margins to all elements in an article ), for example, blog articles compiled by complex markdown.

In most cases, you have to deal with many exceptions and problems. For example, titles and pictures usually need more white spaces, but if two pictures are placed together, then there will be fewer blank spaces between the two images. The direct distance between the h2 tag and the h3 tag is smaller than that between the two h2 tags.

When the original author started working on the front-end just a few years ago, all these exceptions and dependencies always lead to complicated code, visual inconsistencies and unexpected behavior. Google does not work for margin-top many times.

Step 1

The simple html is as follows:

<article class="article">  
Usually, two segments are taken out to adjust the vertical margin between them. After the expected effect is achieved, this value is used as the base margin of all elements.
.article > * + * {     margin-top: 1.5rem;}
The preceding css Code adds margin-top to all child elements with adjacent sibling elements in. article. Only add the margin-top attribute to the immediate element to avoid unwanted results. For example, in the preceding html, ul will be added with the margin-top attribute instead of the li attribute.
Http://codepen.io/sebastianeberlein/pen/JWqbpX
Step 2
In this step, more specific css rules will be added, such:
.article > img + * {     margin-top: 3rem;}
Any element after the img receives a specific margin-top, and the effect is similar to applying margin-bottom directly to the img. However, using adjacent sibling selector and edge top has two advantages:
1. You do not have to delete margin-bottom from the last sub-process.
2. Avoid collapse margin (collapsing margins .)
Http://codepen.io/sebastianeberlein/pen/yMWVKr

 
Step 3
In this step, add the rule to a specific element, for example:
.article > * + h2 {     margin-top: 4rem;}.article > * + img {     margin-top: 3rem;}
If h2 and img have adjacent brothers, a specific margin-top is received.
Http://codepen.io/sebastianeberlein/pen/aJrBGd
Step 4
Processing styles with special relevance in this last step
.article > img + img {     margin-top: 1rem; }
Change the distance between adjacent images
Http://codepen.io/sebastianeberlein/pen/vxwyjJ

You can also add precise css selectors as needed, such:
.article > img + img + img + h2 {     margin-top: 5rem;}
If an h2 is arranged in three consecutive images, it will receive a specific margin-top. Fortunately, this is only a special case, but we are glad to know that adjacent sibling selectors can solve this complex dependency problem.
Advanced use
To improve readability, use (SCSS) nesting and write each rule into one row. You do not need to group selectors with the same value because CSSO will process them in subsequent build tasks.
.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 technology also applies to SASS or CSS, such as baseline mesh. If all the margin values are calculated using a specified margin variable, you only need to change the variable to increase or reduce the overall white space.
Http://codepen.io/sebastianeberlein/pen/NpVbMO
Conclusion
Generally, a website is developed with complicated articles, including the category title, Introduction text, nested layout, and other elements. Using the adjacent sibling selector and the unique margin-top can solve complicated design requirements while keeping CSS understandable, so that you can add or adjust rules later.
Https://hackernoon.com/advanced-vertical-margins-4ac69f032f79.