Model ramki: scalanie marginesów CSS
- Poprzednia strona Marginesy zewnętrzne CSS
- Następna strona Podsumowanie pozycjonowania CSS
Scalanie marginesów to sytuacja, gdy dwa pionowe marginesy spotykają się, tworząc jeden margines.
Wysokość scalonego marginesu jest równa największej z wysokości dwóch scalających się marginesów.
Scalanie marginesów
Scalanie marginesów (叠加) to dość prosty koncept. Ale w praktyce projektowania layoutu stron internetowych powoduje wiele zamieszania.
Prosto mówiąc, scalanie marginesów to sytuacja, gdy dwa pionowe marginesy spotykają się, tworząc jeden margines. Wysokość scalonego marginesu jest równa największej z wysokości dwóch scalających się marginesów.
Kiedy jeden element pojawia się nad innym elementem, dolny margines zewnętrzny pierwszego elementu łączy się z górnym marginesem zewnętrznym drugiego elementu. Zobacz poniższy obrazek:
Kiedy jeden element zawiera drugi (zakładając, że nie ma wewnętrznych marginesów lub obramowania, które oddzielałyby marginesy zewnętrzne), ich górne i/lub dolne marginesy zewnętrzne również się łączą. Zobacz poniższy obrazek:
Choć może się wydawać dziwnie, marginesy mogą nawet się z sobą łączyć.
Załóżmy, że mamy pusty element, który ma marginesy, ale nie ma obramowania ani wypełnienia. W takim przypadku, górny margines zewnętrzny i dolny margines zewnętrzny stykają się razem i łączą się:
Jeśli ten margines napotka margines innego elementu, również nastąpi scalenie:
To jest powodem, dla którego seria elementów akapitowych zajmuje mało miejsca, ponieważ wszystkie ich marginesy są scalone razem, tworząc mały margines.
Scalanie marginesów na pierwszy rzut oka może wyglądać dziwnie, ale w rzeczywistości ma sens. Weź na przykład typową stronę tekstową z kilkoma akapitami. Przestrzeń nad pierwszym akapitem jest równa górnemu marginesowi akapitu. Bez scalenia marginesów, między kolejnymi akapitami byłoby sumą górnego i dolnego marginesu. Oznacza to, że przestrzeń między akapitami jest dwukrotnie większa od przestrzeni na górze strony. Jeśli nastąpi scalenie marginesów, górny i dolny marginesy akapitów zostaną scalone razem, co spowoduje, że odległości będą jednolite.
Uwaga:Tylko pionowe marginesy zewnętrzne bloków w normalnym strumieniu dokumentów ulegają scaleniu. Marginesy między wierszami, blokami pływającymi lub elementami z absolutnym pozycjonowaniem nie ulegają scaleniu.
- Poprzednia strona Marginesy zewnętrzne CSS
- Następna strona Podsumowanie pozycjonowania CSS
