CSS 2.2 — マージンの相殺法

Collapsing margins

8.3.1. ~marginの相殺-法

CSS においては、二つ以上の(互いに同胞†でないこともある)~boxの いくつかの~marginが互いに`連接して$いるときには、単独の~marginを形成するように結合され得る。 ~marginをこの仕方で結合することを, `相殺-@( `collapse^en ) するという††。 結合された結果の~margin【または, それを成す~marginたち】は、 `相殺された~margin@( `collapsed margin^en ) と呼ばれる。 ◎ 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.

【† 同じ親を共有する子 】【†† すなわち、~margin区画のみ互いに重なり得る下で,可能な限り互いの間を詰める。 】

次の場合を除き、`連接して$いる縦方向~marginは,`相殺され$る: ◎ Adjoining vertical margins collapse, except:

横方向~marginどうしが`相殺され$ることは、決してない。 ◎ Horizontal margins never collapse.

2つの~marginは、次のいずれも満たされるとき, そのときに限り, `連接して@ いる( `adjoining^en )とされる: ◎ Two margins are adjoining if and only if:

`相殺された~margin$は、それを成す~margin成分のいずれかが,別の~marginと`連接して$いるならば、その別の~marginとも`連接して$いるものと見なされる。 ◎ A collapsed margin is considered adjoining to another margin if any of its component margins is adjoining to that margin.

注記: `連接して$いる~marginたちは、同胞や先祖の関係にない要素たちから生成されることもある。 ◎ Note. Adjoining margins can be generated by elements that are not related as siblings or ancestors.

注記: 上の規則は、次を含意する: ◎ Note the above rules imply that:

  • [ `浮動-$された / `絶対的に位置され$た / `行内-塊$ ]~boxの~marginは、(~box自身の`~flow内$にある子も含め,)他のどの~boxの~marginとも`相殺され$ない。 ◎ 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).
  • 新たな塊~整形~文脈を確立する要素(`浮動体$や[ `overflow$p が非 `visible^v にされた要素 ]など)の~marginは、その`~flow内$にあるどの子~boxの~marginとも`相殺され$ない。 ◎ ↑
  • [ `~flow内$にある`塊~level$の要素 ]の下端~marginと, 要素の次の[ `~flow内$にある`塊~level$の同胞 ]の上端~marginとは、常に`相殺され$る — その同胞が`~clearance$を持たない限り。 ◎ 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.
  • [ `~flow内$にある塊~要素 ]の上端~marginと, 要素の最初の[ `~flow内$にある`塊~level$の子 ]の上端~marginとは、要素が[ 上端~border, 上端~padding ]を持たない, かつ 子は`~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.
  • `~flow内$にある塊~boxの下端~marginと, その~boxの最後の[ `~flow内$にある`塊~level$の子 ]の下端~marginとは、次がすべて満たされるならば,`相殺され$る: ◎ 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\

    • ~boxの `height$p は `auto^v にされ, `min-height$p は 0 にされている。 ◎ ↑
    • ~boxは[ 下端~padding, 下端~border ]を持たない。 ◎ the box has no bottom padding and no bottom border and\
    • 子の下端~marginと, `~clearance$を持つものの上端~marginとは、`相殺され$ていない。 ◎ the child’s bottom margin does not collapse with a top margin that has clearance.
  • ~boxの上端~marginと, 下端~marginとは、次のすべてが満たされるならば,`相殺され$る:

    • `min-height$p 値は 0 。
    • ~boxは、 上端/下端 ~borderも 上端/下端 ~paddingも持たない。
    • ~boxの `height$p 値は 0 または `auto^v 。
    • ~boxは、`行l~box$を包含しない。
    • ~boxの`~flow内$にある子たち(もしあれば)すべての~marginは,`相殺され$ている。
    ◎ 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.

二つ以上の~marginが`相殺され$るときの結果の~margin幅は、各`相殺された~margin$幅の最大になる。 負な~marginが混じっている場合、それらの絶対~値の最大が,正な~marginの最大(正な~marginが無ければ 0 )から差引かれる。 ◎ 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.

ある~boxの上端~marginと下端~marginとが`連接して$いる場合、他の~marginたちが,その~marginを `挟むように相殺-@ する( `collapse through^en )ことも起こり得る。 この場合の~boxの位置は、[ 【その~boxを生成した要素と】 `相殺された~margin$を成す他の要素 ]との関係性に依存する: ◎ 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.

要素の~marginが`挟むように相殺-$されている場合、その位置が,[ その~marginを挟んでいる他の~margin ]を持つ要素の位置に効果が及ぶことはないことに注意 — 要素の上端~border辺の位置が要求されるのは、これらの要素の子孫を~lay-outするときに限られる。 ◎ 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.