[css2]Collapsing Margin
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.
Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, except:
● Margins of the root element's box do not collapse.
● If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of
following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
Horizontal margins never collapse.
Two margins are adjoining if and only if:
● both belong to in-flow block-level boxes that participate in the same block formatting context
● no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes (see 9.4.2) are
ignored for this purpose.)
● both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
○ top margin of a box and top margin of its first in-flow child
○ bottom margin of box and top margin of its next in-flow following sibling
○ bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
○ top and bottom margins of a box that does not establish a new block formatting context and that has zero computed
'min-height', zero or 'auto' computed 'height', and no in-flow children
A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.
Note. Adjoining margins can be generated by elements that are not related as siblings or ancestors.
Note the above rules imply that:
● Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
● Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible')
do not collapse with their in-flow children.
● Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
● Margins of inline-block boxes do not collapse (not even with their in-flow children).
● The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling,
unless that sibling has clearance.
● The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has
no top border, no top padding, and the child has no clearance.
● The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow
block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not
collapse with a top margin that has clearance.
● A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom
padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins
(if any) collapse.
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of
negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the
positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is
deducted from zero.
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it.
In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
● If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same
as the parent's.
● Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved.
The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with
whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.
아웃오브플로우라 불리지는 엘리먼트는 만약 그것이 플로트 되었거나 절대적인 위치를 지니거나 혹은 그것이 루트엘리먼트인 경우입니다.
in-flow 라 불리는것은 그것이 아웃오브플로우가 아닌 경우입니다. 엘리먼트 A의 플로우라는것은 A와 그리고 가장가까운 아웃오프플로우의 조상이 A인 모든 in-flow 엘리먼트가 세트로 이루어진것을 말합니다.
box formatting context
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context
CSS에서 두개 혹은 그 이상의 박스의 인접한 마진은 (형제요소일수도 있고 아닐수도 있는) 단독적인 마진의 형태로 결합할수 있다.
그리고, 이러한 방식으로 결합된 마진의 결과는 붕괴된 마진이라 불린다.
인접하고 있는 수직의 마진은 붕괴되며, 예외로는
● 루트 엘리먼트의 박스의 마진은 붕괴되지 않는다.
● 만약 상단과 하단의 마진이 제거된 엘리먼트가 인접해 있다면 그것의 마진은 따라온 형재의 마진과 같이 결합한다. 그러나 그것은 마진의 결과가 부모블락의 하단 마진과 함께 붕괴되진 않는다
수평적인 마진은 결코 붕괴되지 않는다.
2개의 마진은 근접한다. 조건에 따라.
● 둘다 속한 블락레벨에 속한다. 레빌의 블락이 이루어진 같은 블락포메팅 컨텍스트 안에 참가한다
● 라인이 없는 박스, 클리어런스가 없는, 패딩이 없는 그리고 그들
● 둘다 속한다면 수직으로 인접한 박스의 경계ㅖ 두가지중 하나의 형태에 따른다면
○ 박스의 상단 마진과 그것의 첫번째 자식 박스의 상단마진
○ 박스의 하단마진과 그것의 형제 요소를 따르고 있는 상단마진
○ 마지막 자식 요소의 하단 마진과 그것의 부모가 'auto' 로 계산된 높이값을 가지고 있는 하단 마진
○ 박스의 상단과 하단 마진은 설립될수 없습니다. 새로운 블락형태의 맥락 그리고 0으로 계산된 최소높이 제로 또는 '자동'으로 계산된 높이, 자식요소를
붕괴된 마진은 결합 고려됬다 다른 마진 . 만약 구성요소
Note.인접한 마진은 형제나 조상과 같이 연관되지 않은 엘리먼트에 의해서 만들어진다.
은연중 상위의 규칙
● float된 박스와 다른 어떠한 박스 사이의 마진은 붕괴되지 않는다.
● 엘리먼트의 마진은 새로운 블락형태의 문맥 (float들이나 visible이 아닌 overflow와 같은 ) 는 붕괴되지 않는다. 그들의 자식요소와
● 절대적인 위치를 같는 박스의 마진은 붕괴되지 않는다.
● 인라인블락 박스의 마진은 붕괴되지 않는다.
● 블락레벨 엘리먼트에 속해있는 하단마진은 항당 붕괴된다. 그것의 형제가 클리어런스가 아닌 이상
●
●
●
2개 혹은 그 이상의 마진이 붕괴될때 결과적인 마진의 폭은 붕괴되는 마진의 폭의 최대값이다. 음수마진의 경우, 인접한 음수마진의 절대값의 최고는 양수의 인접한 마진의 최고값으로부터 공제된다. 만약 그것이 양수의 마진이 아니라면, 근접함 마진의 절대값의 최고는 0으로부터 공제된다.
만약 박스의 상단과 하단의 마진이 근접하면, 그때 마진이 그것을 통해 붕괴하는것이 가능하다. 예를 들어, 엘리먼트의 위치는 마진이 붕괴된 다른 엘리먼트의 관계에 의존한다.
● 만약 엘리먼트의 마진이 그것의 부모의 상단마진과 함께 붕괴되었다면, 박스의 상단 보더의 경계는 그것의 부모의 경계와 동일하게 정의된다.
● 그렇지 않다면, 엘리먼트의 부모가 마진 콜렙싱에 참여하지 않았건, 오직 부모의 하단 마진만 참여하게 된거다. 엘리먼트의 상단 보더경계의 위치는 만약 그 엘리먼트가 0이아닌 하단 보더를 가지고 있었던 때와 같다.
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.
Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, except:
● Margins of the root element's box do not collapse.
● If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of
following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
Horizontal margins never collapse.
Two margins are adjoining if and only if:
● both belong to in-flow block-level boxes that participate in the same block formatting context
● no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes (see 9.4.2) are
ignored for this purpose.)
● both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
○ top margin of a box and top margin of its first in-flow child
○ bottom margin of box and top margin of its next in-flow following sibling
○ bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
○ top and bottom margins of a box that does not establish a new block formatting context and that has zero computed
'min-height', zero or 'auto' computed 'height', and no in-flow children
A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.
Note. Adjoining margins can be generated by elements that are not related as siblings or ancestors.
Note the above rules imply that:
● Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
● Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible')
do not collapse with their in-flow children.
● Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
● Margins of inline-block boxes do not collapse (not even with their in-flow children).
● The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling,
unless that sibling has clearance.
● The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has
no top border, no top padding, and the child has no clearance.
● The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow
block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not
collapse with a top margin that has clearance.
● A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom
padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins
(if any) collapse.
When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of
negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the
positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is
deducted from zero.
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it.
In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
● If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same
as the parent's.
● Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved.
The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with
whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.
An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.
아웃오브플로우라 불리지는 엘리먼트는 만약 그것이 플로트 되었거나 절대적인 위치를 지니거나 혹은 그것이 루트엘리먼트인 경우입니다.
in-flow 라 불리는것은 그것이 아웃오브플로우가 아닌 경우입니다. 엘리먼트 A의 플로우라는것은 A와 그리고 가장가까운 아웃오프플로우의 조상이 A인 모든 in-flow 엘리먼트가 세트로 이루어진것을 말합니다.
box formatting context
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context
CSS에서 두개 혹은 그 이상의 박스의 인접한 마진은 (형제요소일수도 있고 아닐수도 있는) 단독적인 마진의 형태로 결합할수 있다.
그리고, 이러한 방식으로 결합된 마진의 결과는 붕괴된 마진이라 불린다.
인접하고 있는 수직의 마진은 붕괴되며, 예외로는
● 루트 엘리먼트의 박스의 마진은 붕괴되지 않는다.
● 만약 상단과 하단의 마진이 제거된 엘리먼트가 인접해 있다면 그것의 마진은 따라온 형재의 마진과 같이 결합한다. 그러나 그것은 마진의 결과가 부모블락의 하단 마진과 함께 붕괴되진 않는다
수평적인 마진은 결코 붕괴되지 않는다.
2개의 마진은 근접한다. 조건에 따라.
● 둘다 속한 블락레벨에 속한다. 레빌의 블락이 이루어진 같은 블락포메팅 컨텍스트 안에 참가한다
● 라인이 없는 박스, 클리어런스가 없는, 패딩이 없는 그리고 그들
● 둘다 속한다면 수직으로 인접한 박스의 경계ㅖ 두가지중 하나의 형태에 따른다면
○ 박스의 상단 마진과 그것의 첫번째 자식 박스의 상단마진
○ 박스의 하단마진과 그것의 형제 요소를 따르고 있는 상단마진
○ 마지막 자식 요소의 하단 마진과 그것의 부모가 'auto' 로 계산된 높이값을 가지고 있는 하단 마진
○ 박스의 상단과 하단 마진은 설립될수 없습니다. 새로운 블락형태의 맥락 그리고 0으로 계산된 최소높이 제로 또는 '자동'으로 계산된 높이, 자식요소를
붕괴된 마진은 결합 고려됬다 다른 마진 . 만약 구성요소
Note.인접한 마진은 형제나 조상과 같이 연관되지 않은 엘리먼트에 의해서 만들어진다.
은연중 상위의 규칙
● float된 박스와 다른 어떠한 박스 사이의 마진은 붕괴되지 않는다.
● 엘리먼트의 마진은 새로운 블락형태의 문맥 (float들이나 visible이 아닌 overflow와 같은 ) 는 붕괴되지 않는다. 그들의 자식요소와
● 절대적인 위치를 같는 박스의 마진은 붕괴되지 않는다.
● 인라인블락 박스의 마진은 붕괴되지 않는다.
● 블락레벨 엘리먼트에 속해있는 하단마진은 항당 붕괴된다. 그것의 형제가 클리어런스가 아닌 이상
●
●
●
2개 혹은 그 이상의 마진이 붕괴될때 결과적인 마진의 폭은 붕괴되는 마진의 폭의 최대값이다. 음수마진의 경우, 인접한 음수마진의 절대값의 최고는 양수의 인접한 마진의 최고값으로부터 공제된다. 만약 그것이 양수의 마진이 아니라면, 근접함 마진의 절대값의 최고는 0으로부터 공제된다.
만약 박스의 상단과 하단의 마진이 근접하면, 그때 마진이 그것을 통해 붕괴하는것이 가능하다. 예를 들어, 엘리먼트의 위치는 마진이 붕괴된 다른 엘리먼트의 관계에 의존한다.
● 만약 엘리먼트의 마진이 그것의 부모의 상단마진과 함께 붕괴되었다면, 박스의 상단 보더의 경계는 그것의 부모의 경계와 동일하게 정의된다.
● 그렇지 않다면, 엘리먼트의 부모가 마진 콜렙싱에 참여하지 않았건, 오직 부모의 하단 마진만 참여하게 된거다. 엘리먼트의 상단 보더경계의 위치는 만약 그 엘리먼트가 0이아닌 하단 보더를 가지고 있었던 때와 같다.