CSS - Jak pozbyć się collapsing margins?

[Marek]

Witam,

Ogarnia mnie powoli frustracja - może ktoś z Was mnie oświeci. Mianowicie
mam problem w pozbyciu się irytującej własności CSS jaką jest collapsing
margins. Mam bloki jeden pod drugim z okrreślonym margin-bottom i chcę
używać tej właściwości. Jednakże element otaczający te bloki musi mieć
zerowy margines poniżej siebie. Co należy zrobić aby tak się stało ?

Przy okazji: dlaczego ta własność CSS nazywa się collapsing margins zamiast
annoying margins lub fucking margins?

[NotBear]

[...] Jednakże element otaczający
te bloki musi mieć zerowy margines poniżej siebie. Co należy zrobić aby
tak się stało ?

W zaleznosci od mozliwosci i potrzeb:
a) wyzerowac margines w ostatnim wewn. bloku, np.:
div:last-child{margin-bottom:0;}
b) ustawic otaczajacemu elementowi niezerowy border-bottom lub
padding-bottom

[Maciej Łebkowski]

Przy okazji: dlaczego ta w=B3asno=B6=E6 CSS nazywa si=EA collapsing ma=

rgins zamiast

annoying margins lub fucking margins?

You're doing it wrong!
Jeszcze nigdy jako=B6 szczeg=F3lnie mi ta cecha nie przeszkadza=B3a.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Podejrzewam, =BFe najpro=B6ciej by=B3oby zrobi=E6 floata, albo tak jak k=
olega
zaproponowa=B3 pobawi=E6 si=EA border/padding (to faktycznie dzia=B3a, z=
tego
co pami=EAtam, cho=E6 na podstawie specki nie jestem w stanie stwierdzi=E6=
,
na jakiej podstawie).

-- =

Maciej =A3ebkowski
http://lebkowski.name/me

[NotBear]

[...] na podstawie specki nie jestem w stanie stwierdzić,
na jakiej podstawie).

Z podanej lokalizacji:
"The bottom margin of an in-flow block-level element with a 'height' of
'auto' is adjoining to its last in-flow block-level child's bottom
margin if the element has no bottom padding or border."

czyli w zgrubnym tlumaczeniu:
"Dolny margines elementu blokowego, w podstawowym biegu dokumentu,
majacego wysokosc:auto, jest sasiadujacym dla dolnego marginesu
ostatniego blokowego bezposredniego potomka w podstawowym biegu, o ile
element nie ma ustawionego dolnego paddingu ani obramowania"

A jesli marginesy pionowe sa sasiadujace (adjoining), to dziala zapadanie.

Z powyzszego wynika kolejny sposob na likwidacje zapadania: ustawic
kontenerowi konkretna wartosc wysokosci.


I jeszcze jeden sposob po przeczytaniu speca: kontenerowi nadac wlasnosc
overflow inna niz visible.

[Maciej Łebkowski]

[...] na podstawie specki nie jestem w stanie stwierdzi=E6,
na jakiej podstawie).

"The bottom margin of an in-flow block-level element with a 'height' o=

f

'auto' is adjoining to its last in-flow block-level child's bottom
margin if the element has no bottom padding or border."

Right, nie doczyta=B3em do tego momentu.

-- =

Maciej =A3ebkowski
http://lebkowski.name/me

[Marek]

Post by NotBear
Z powyzszego wynika kolejny sposob na likwidacje zapadania: ustawic
kontenerowi konkretna wartosc wysokosci.

Nie da rady w tym konkretnym przypadku jaki pchnął mnie z pytaniem na grupę.

Post by NotBear
I jeszcze jeden sposob po przeczytaniu speca: kontenerowi nadac wlasnosc
overflow inna niz visible.

Hmmm... może w tym przypadku da się to zrobić. Muszę jednakże sprawdzić czy
scrole nie wystąpią przy wartości "auto". Niedawno miałem z tym problem pod
FF gdy wewnętrzny element stosował ujemne marginesy procentowe. Mimo iż
mieścił się w kontenerze to i tak scroll występował.

[Marek]

Przepraszam grupowiczów za moje milczenie. Czasami przez kilka dni nie mam
dostępu do serwera grup.

Jeszcze nigdy jakoś szczególnie mi ta cecha nie przeszkadzała.

A mi owszem. Mam kilka bloków jeden pod drugim. Każdy z nich musi mieć
marginesy pionowe. Paddingu nie mogę zastosować w miejsce marginesów gdyż
padding jest już używaney do tego aby zawartość bloku była odsunięta od jego
krawędzi. Blok zawiera jakieś tło. W związku z tym aby wizulanie powstała
przerwa pionowa miedzy blokami stosuję marginesy. Problem w tym, że po
ostanim elemencie margines osiąga podwójną wartość wskutek zapadania. W
efekcie powstaje kobylasta przerwa miedzy ostatnim blokiem a kolejnym
elementem.

Podejrzewam, że najprościej byłoby zrobić floata,

Tak też zrobiłem lecz potem trzeba stosować "gaszenie" tego floata
konstrukcją <div style="clear:both"></div> lub jeśli się da - to CSS w
containerze. Może mam maniakalą potrzebę unikania nadmiarowych tagów w
kodzie HTML. :-)

albo tak jak kolega
zaproponował pobawić się border/padding (to faktycznie działa, z tego
co pamiętam, choć na podstawie specki nie jestem w stanie stwierdzić,
na jakiej podstawie).

j/w

[Maciej Łebkowski]

Tak te=BF zrobi=B3em lecz potem trzeba stosowa=E6 "gaszenie" tego floa=

ta konstrukcj=B1

<div style=3D"clear:both"></div> lub je=B6li si=EA da - to CSS w conta=

inerze. Mo=BFe

mam maniakal=B1 potrzeb=EA unikania nadmiarowych tag=F3w w kodzie HTML=

.

Tak si=EA robi=B3o dawno temu. Teraz si=EA robi overflow:auto lub overf=
low:hidden

-- =

Maciej =A3ebkowski
http://lebkowski.name/me

[Marek]

Tak się robiło dawno temu. Teraz się robi overflow:auto lub
overflow:hidden

No i teraz miewa się kłopoty z konsekwencjami tego stylu w szczególnych
przypadjach, o których napisałem.

[NotBear]

Problem w tym, że po ostanim elemencie margines osiąga podwójną wartość
wskutek zapadania. W efekcie powstaje kobylasta przerwa miedzy ostatnim
blokiem a kolejnym elementem.

Cos to podejrzanie wyglada... Jakby dzialalo zapadanie, to margines
wynosilby tylko tyle ile wiekszy zdefiniowany dla sasiadujacych
elementow. A Tobie marginesy sie sumuja. Lepiej pokaz kod. Najlepiej
razem z kawalkiem projektu graficznego.

[Marek]

Post by NotBear
Cos to podejrzanie wyglada... Jakby dzialalo zapadanie, to margines
wynosilby tylko tyle ile wiekszy zdefiniowany dla sasiadujacych elementow.

...plus margines bieżącego elementu, który jest tym samym elementem co
poprzednicy.W sumie przerwa wynosi 2x margines dolny. Gdy w ostatnim
elemencie napiszę margin-bottom:0px, to wtedy przerwa wynosi 1 x margines
dolny poprzednika.

Post by NotBear
A Tobie marginesy sie sumuja. Lepiej pokaz kod. Najlepiej razem z
kawalkiem projektu graficznego.

Kod w uproszczeniu:
<jakis_container>
<div></div>
<div></div>
<div></div>
<div></div>
</jakis_container>
:-)

Do tego:
div {margin-bottom:10px}

Przertwa między ostatnim DIVem a końcem containera wynosi 20px. Tak mi
wyszło.

[Peter May]

Post by Marek
Witam,
Ogarnia mnie powoli frustracja - może ktoś z Was mnie oświeci.
Mianowicie mam problem w pozbyciu się irytującej własności CSS jaką jest
collapsing margins. Mam bloki jeden pod drugim z okrreślonym
margin-bottom i chcę używać tej właściwości. Jednakże element otaczający
te bloki musi mieć zerowy margines poniżej siebie. Co należy zrobić aby
tak się stało ?
Przy okazji: dlaczego ta własność CSS nazywa się collapsing margins
zamiast annoying margins lub fucking margins?

Może to coś pomoże:
http://www.cssmania.pl/csswiki/index.php?title=Cellspacing

[Marek]

Post by Peter May
http://www.cssmania.pl/csswiki/index.php?title=Cellspacing

Ale ten artykuł dotyczy tabel a nie bloków.