Based on a recent article, "Arrangement of margins and padding in CSS . " I suggest additions on this issue. It is assumed that the reader is aware of what is a margin , and what Margin collapsing is .

Help to parent

Indents are necessary to form at the expense of the element itself, and not its content, i.e. it is not necessary to provide indenting between adjacent blocks due to indents of their children.


')

Margin for padding

As a consequence of the previous paragraph, the margin first and last elements of the vertical list should be zero, for why? If we need indentation from the outer borders of the parent, use padding for the parent.

Mixin for vertical list

To implement all of the above, you need a helper to place a margin using native not() , for example.

 // Scss @mixin ritm($valueTop, $valueBottom:$valueTop) { @if $valueTop != 0 { @include not(':first-child') { margin-top: $valueTop; } } @if $valueBottom != 0 { @include not(':last-child') { margin-bottom: $valueBottom; } } } 

More details .

User Content

User-defined content, in the classical sense, consists of paragraphs, lists, images, etc. All this forms a conditional vertical list of (almost homogeneous) elements. All of the above rules apply to the components of the UGC .

Moreover, explicitly specifying the vertical margin for UGC elements allows for permutations of content elements without harm to the final result.

 // Scss .ui-h3 { @include ritm(1.5*$v, 1*$v); } .ui-img { @include ritm(1*$v, 1.5*$v); .ui-h3 + & { margin-top: 1.5*$v; } } 

Margin and Box-model

It is worth making a reservation that the margin is an integral part of the block, although it is perceived as something incidental. It is important to understand that the dimensions of the block, and specifically its width, are not always the same, that the value of the width property. Width is the width of the part of the box from the border to the border, or the size of the content area depending on the box model. When changing the box model (border-box / content-box), the width may change, while the block sizes remain unchanged.

Each box has four edges, a border edge, a padding edge, and a content edge.

developer.mozilla.org - Introduction_to_the_CSS_box_model

In it, each box has 4 areas: margin (external indents), border (frame), padding (internal fields), and content (content or content).

developer.mozilla.org - box_model

Each box has a content area (eg, text, an image, etc.) and optional surrounding padding, border, and margin areas;

www.w3.org - box-dimensions

Subtleties of translation, holivar sake:

- block border ≠ border block, border - this is a border according to the specification, and the block border is the border / edge of the block
- block area = block area (read block dimensions), but
- block area - area bounded by the border.

Honestly, science and science, and daily work makes its own changes in the lexicon of developers.

Ps. These additions were proposed by me in the comments to the above article, but the strict UFO cut out all the tags due to limited rights.