Example of using negative margin to achieve average layout in CSS

For evenly distributed layouts, we generally use the negative margin method. The following figure shows an average layout.

In this case, we usually add a div between the parent element and the child element, and then set a negative margin-right for this div, with the value being the distance between the two child elements.
For example, we set the width of each child element to 100px, there are 3 child elements in total, and give each child element a margin-right of 50px, then the width of the parent element should be 100x3+50x2=400px. Above code:

//HTML
<div class="father">
    <div class="middle">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</div>

//CSS
.son1,.son2,son3{
    margin-right:50px;
    width:100px;
}
.father{
    width:400px;
}
.middle{
    margin-right:-50px;
}

The middle layer margin-right:-50px is equivalent to "extending" 50px to the right, so that the son3 element has space to be in the same line as other elements.

This concludes this article about examples of using CSS to achieve average layout with negative margins. For more information about CSS average layout with negative margins, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!