Webkit margin collapse css

Preventing Margin Collapse by Setting CSS Top Margin to Zero

For a fixed header that dynamically changes its height, the content div needs to have its height calculated and set accordingly. A demo showcasing this solution can be found using jQuery. The issue you are experiencing is a result of collapsing margins, a confusing CSS feature that has caused issues for developers for many years. A JS solution is to dynamically obtain the header’s outer height and utilize it as the top margin. If your header height changes based on media queries or other factors, you can easily adapt the margin based on window resizing. A working jsFiddle demonstrating this solution is available.

Wanted: CSS grid system AND collapsing margins

Referring to the document (https://www.w3.org/TR/CSS2/box.html#collapsing-margins) specifications.

• Both of these entities pertain to the in-flow block-level boxes that engage in the identical block formatting context.
• Split them up, disregarding zero-height line boxes as specified in 9.4.2. None of the following features should be included: line boxes, clearance, padding, or borders.
• The pairs that are formed by box edges that are vertically adjacent include the following options:
• 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 , and
• 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 .

In these scenarios, the rule will be violated if margins collapse.

• The collapsing of margins does not occur between a floated box and any other box, including its in-flow children.
• The margins of elements that create new block formatting contexts, such as floated elements and those with an ‘overflow’ property other than ‘visible’, do not combine with the margins of their in-flow children.
• The collapse of margins does not occur with absolutely positioned boxes, even when they contain in-flow children.
• The collapsing of margins does not occur with inline-block boxes, even when they have in-flow children.
• Unless clearance is present, the top margin of an in-flow block-level sibling will always collapse with the bottom margin of the preceding in-flow block-level element.
• If an in-flow block element lacks a top border, top padding, and the first in-flow block-level child has no clearance, then the top margin of the element will collapse with the top margin of the child.
• When an in-flow block box has a ‘height’ of ‘auto’ and a ‘min-height’ of zero, and there is no bottom padding or border, its bottom margin collapses with the bottom margin of the last in-flow block-level child. However, this only occurs if the child’s bottom margin does not collapse with a top margin that has clearance.
• If a box has a ‘min-height’ property of zero, no top or bottom borders, no top or bottom padding, a ‘height’ of either 0 or ‘auto’, and no line box, and if all of its in-flow children’s margins (if any) collapse, then its margins will collapse as well.

The item margins for flex box can be found in the following link: https://www.w3.org/TR/css-flexbox-1/#item-margins.

The collapsing of margins among adjacent flex items does not occur.

The item margins for the grid can be found at this link: https://www.w3.org/TR/css-grid-1/#item-margins.

The collapsing of margins between neighboring grid items is not permitted.

One cannot bring down margin-top: 50px; with any of the following methods: inline-block , position: absolute , float , flex , or grid .

If setting the margin to zero is not an option, there are various alternative methods to disable the margin function.

As an illustration, suppose h1 represents inline and assume that the div element has a gold background in order to differentiate from the margin-top: 50px; .

As per the specifications for margins (referenced at https://www.w3.org/TR/CSS2/box.html#margin-properties):

Margin properties are used to define the width of the margin area of a box. While the ‘margin’ shorthand property sets the margin for all four sides, the other margin properties only set their respective side. These properties can be applied to all elements, but it should be noted that vertical margins do not affect non-replaced inline elements.

The only way to collapse margins without resorting to selector manipulation or JavaScript is by using the following option.

Avoid placing margin-top: 50px on h1 , rather choose .row as the appropriate location.

Header is normal div
 
Col 1 is float: left
 
Col 2 is float: left
 
 
I want a 50 pixel margin between Header and the Cols, but the two margins don't collapse and I end up with 50 + = 100 pixel gap.
 

It seems unlikely that you can accomplish that. Perhaps, the optimal approach would be to eliminate the margins by specifying certain conditions.

In case the issue occurs exclusively when the .column is used along with h1 elements that immediately follow .header , a more precise CSS rule can be created to override the margin and cancel it out.

This answer contains many conditional statements and requires additional information to be solved accurately.

Css — How to disable margin-collapsing?, Every webkit based browser should support the properties -webkit-margin-collapse. There are also subproperties to only set it for the top or bottom margin. You can give it the values collapse (default), discard (sets margin to 0 if there is a neighboring margin), and separate (prevents margin collapse). Code sample.children

Css issue with top margin

Источник

Схлопывание внешних отступов

Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны). Это поведение известно как схлопывание внешних отступов (margin collapsing). Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

Схлопывание внешних отступов происходит в трёх случаях:

Соседние элементы (siblings)

Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство clear ).

Родительский и первый/последний дочерние элементы

Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения margin-top родительского элемента, от margin-top одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height , min-height или max-height для отделения отступов margin-bottom родительского блока от margin-bottom отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.

Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height или min-height для отделения margin-top верхнего отступа этого блока от его margin-bottom нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.

• Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
• Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
• При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
• Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
• Внешние отступы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.

Примеры

HTML

p>Нижний отступ этого абзаца схлопнулся …p> p>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный code>1.2remcode>.p> div>Этот родительский элемент содержит два абзаца! p>Этот абзац имеет отступ code>.4remcode> между ним и текстом выше.p> p>Нижний отступ этого абзаца схлопывается с отступом родителя, принимая значение code>2remcode>.p> div> p>Этот абзац имеет отступ code>2remcode> от элемента выше.p> 

CSS

div  margin: 2rem 0; background: lavender; > p  margin: .4rem 0 1.2rem 0; background: yellow; > 

Источник

-webkit-margin-collapse property

Possible values:

Description of values:

Specifies whether the top and bottom margins can be shared between adjacent elements.

Specifies whether the top and bottom margins can be shared between adjacent elements.

Default. Margins are collapsed with the adjacent elements.

Discards the margin.

Takes the value of this property from the computed style of the parent element.

Default. Separate margins are drawn for the adjacent elements.

If only one value is specified, it affects both the -webkit-margin-top-collapse and -webkit-margin-bottom-collapse properties.

Example HTML code 1:

head> style> .collMargin  -webkit-margin-collapse: separate; margin:20px; > style> head> body> div class="collMargin" style="border:3px solid #000000;"> The margins are separate div> div class="collMargin" style="border:3px solid #000000;"> between these two divisions div> div style="border:3px solid #000000;margin:20px;"> The margins are collapsed div> div style="border:3px solid #000000;margin:20px;"> between these two divisions div> body>

Источник