html5 - A few questions in the introduction to bootstrap

Question

I just saw this sentence:
By setting the padding attribute for "column", you can create a gap (gutter) between columns. By setting a negative margin for the .row element to offset the padding set for the .container element, the padding is indirectly offset for the "column" contained in the "row".
I don’t quite understand what it means. Is there any more popular explanation or example? ?

Answer 1

The negative margin value of row is mainly to eliminate the margins of the leftmost and rightmost column elements and containers

You can read the original text (http://getbootstrap.com/css/#...)

Columns create gutters (gaps between column content) via padding. That
padding is offset in rows for the first and last column via negative
margin on .rows.

We know that the order of using grids in bootstrap is container -> row -> col

Their css definition:

.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}

.col-*-* {
    padding-right: 10px;
    padding-left: 10px;
}

If there is no negative margin offset, there will be a gap before and after. You can remove the negative margin yourself and compare to see the difference