[css] dziwne (dla mnie) zachowanie margin-bottom przy użyciu min-width

[automatyk]

Poniżej link z dwoma bardzo podobnymi przykładami.

 

https://jsfiddle.net/fgxabLop/2/

 

Czy ktoś potrafi wytłumaczyć dlaczego dodanie małej wartości margin-bottom do zielonego elementu powoduje wydłużenie czerwonego elementu od dołu? Jaka zasada tym rządzi? Nie mogę sam do tego dojść niestety

 

Dzieje się tak po użyciu min-height dla niebieskiego elementu. Przy użyciu samego height nie ma tego efektu. Wartość margin-bottom jest dużo mniejsza niż ustawiona wysokość niebieskiego elementu, nie wychodzi poza niego.

[jimmi]

nie wiem ale jak zmienisz 

 

w div3 margin-bottom na padding-bottom to już czerwony pasek znika

 

[automatyk]

Bardziej istotne od tego że tak się dzieje, jest to dlaczego tak się dzieje. Głód wiedzy.

 

Żeby był ciekawiej, to ten efekt występuje na Chrome i Operze. Na Firefox w obu przypadkach nie ma wystającego czerwonego elementu na dole.

[mamoczy]

Wyguglałem iż to stary bug silnika przeglądarek opartych o WebKit.

https://bugs.webkit.org/show_bug.cgi?id=26559

Najwyraźniej nie załatali go w Chrome i w takim stanie trafił również do najnowszej Opery.

 

Ciekawsze motywy są przy drukowaniu 1:1 z różnych przeglądarek. Pozdrawiam głodnych wiedzy