Συγχώνευση Περιθωρίων CSS

Margin collapsing refers to the formation of a margin when two vertical margins meet.

The height of the merged margin is equal to the larger of the two margins that collapse.

Margin collapsing

Margin collapsing (stacking) is a relatively simple concept. However, in practice, it can cause much confusion when laying out web pages.

In simple terms, margin collapsing refers to the formation of a margin when two vertical margins meet. The height of the merged margin is equal to the larger of the two margins that collapse.

When an element appears above another element, the bottom margin of the first element and the top margin of the second element will collapse. See the following figure:

Παράδειγμα συγχώνευσης περιθωρίων CSS 1

Try it yourself

When an element is contained within another element (assuming there are no padding or borders to separate the margins), their top and/or bottom margins will also collapse. See the following figure:

Παράδειγμα συγχώνευσης περιθωρίων CSS 2

Try it yourself

Although it may seem strange, margins can even collapse with themselves.

Suppose there is an empty element with a margin but no border or padding. In this case, the top margin and the bottom margin meet each other, and they will collapse:

Παράδειγμα συγχώνευσης περιθωρίων CSS 3

If this margin encounters the margin of another element, it will also collapse:

Παράδειγμα συγχώνευσης περιθωρίων CSS 4

This is why a series of paragraph elements occupy very little space, because all their margins are merged into a small margin.

Margin collapsing may seem strange at first glance, but in fact, it is meaningful. Take a typical text page composed of several paragraphs as an example. The space above the first paragraph is equal to the top margin of the paragraph. If there is no margin collapsing, the margins between all subsequent paragraphs will be the sum of the adjacent top and bottom margins. This means that the space between paragraphs is twice the space at the top of the page. If margin collapsing occurs, the top and bottom margins between paragraphs will merge together, making the distances consistent.

Η πραγματική σημασία της συγχώνευσης περιθωρίων CSS

Note:Only the vertical margins of block boxes in the normal document flow will cause margin collapsing. The margins between inline boxes, floating boxes, or absolutely positioned boxes will not collapse.

All CSS margin properties

Ιδιότητα Περιγραφή
margin Απλοποιημένη ιδιότητα για τη ρύθμιση των εξωτερικών περιθωρίων σε μια γραμμή δήλωσης.
margin-bottom Ρύθμιση της κάτω εξωτερικής κύριας γωνίας του στοιχείου.
margin-left Ρύθμιση της αριστεράς εξωτερικής κύριας γωνίας του στοιχείου.
margin-right Ρύθμιση της δεξιάς εξωτερικής κύριας γωνίας του στοιχείου.
margin-top Ρύθμιση της επάνω εξωτερικής κύριας γωνίας του στοιχείου.