Bokas modelo: CSS pagkakasama ng malayuan

Ang pagkakasama ng malayuan ay tumutukoy sa, kapag ang dalawang vertikal na malayuan ay nangyayari ang pagkakasama, sila ay magiging isang malayuan.

Ang taas ng nagkakasama ay kasing taas ng mas malaki sa dalawang pagkakasama na nangyayari.

Pagkakasama ng malayuan

Ang pagkakasama ng malayuan (pagkakasama) ay isang masyadong madaling pag-alam. Subalit, sa praksis ng paglalaan ng web, ito ay nagiging dahilan ng maraming pagkalito.

Para sa madaling pag-unawa, ang pagkakasama ng malayuan ay tumutukoy sa, kapag ang dalawang vertikal na malayuan ay nangyayari ang pagkakasama, sila ay magiging isang malayuan. Ang taas ng nagkakasama ay kasing taas ng mas malaki sa dalawang pagkakasama na nangyayari.

Kapag ang isang elemento ay lumilitaw sa ibabaw ng ibang elemento, ang mababang malayuan ng unang elemento at ang mataas na malayuan ng ikalawang elemento ay magiging isang pagkakasama. Tingnan ang ibaba:

Mga halimbawa ng pagkakasamahang pag-ugnay ng CSS 1

Subukan natin ito personal.

Kapag ang isang elemento ay nakasangkot sa ibang elemento (pagkatapos ay walang padding o border na naghihiwalay sa malayuan), ang kanilang mataas at/ o mababang malayuan ay magiging isang pagkakasama din. Tingnan ang ibaba:

Mga halimbawa ng pagkakasamahang pag-ugnay ng CSS 2

Subukan natin ito personal.

Bagaman kahina-hinala, ang malayuan ay maaaring makasama din sa kanilang sarili.

Mayo nag-iisang walang-laman na elemento, na mayroong malayuan, ngunit walang border o padding. Sa ganitong sitwasyon, ang mataas na malayuan at ang mababang malayuan ay nangyayari ang pagkakasama:

Mga halimbawa ng pagkakasamahang pag-ugnay ng CSS 3

Kung ang margin na ito ay nakakita ng margin ng ibang elemento, ito ay magiging pagkakasamahang pag-ugnay:

Mga halimbawa ng pagkakasamahang pag-ugnay ng CSS 4

Ito ang dahilan kung bakit napakaliit ang espasyo ng isang serye ng paragrapo ng elemento, dahil ang lahat ng kanilang margin ay magiging pagkakasamahang pag-ugnay, na nagbibigay ng isang maliit na margin.

Ang pagkakasamahang pag-ugnay ng margin ay mukhang kakaiba, ngunit sa katunayan, ito ay may kahulugan. Sa isang tipikal na pahina ng teksto na binubuo ng ilang mga paragrapo, ang espasyo sa itaas ng unang paragrapo ay katumbas ng upper margin ng paragrapo. Kung wala ang pagkakasamahang pag-ugnay ng margin, ang lahat ng mga margin sa pagitan ng mga paragrapo ay magiging sumagupa ng upper margin at lower margin. Ito ay nangangahulugan na ang espasyo sa pagitan ng mga paragrapo ay dalawang beses ang laki ng itaas ng pahina. Kung nangyari ang pagkakasamahang pag-ugnay ng margin, ang upper margin at lower margin ng mga paragrapo ay magiging pagkakasamahang pag-ugnay, kaya ang layo sa lahat ng lugar ay magiging magkapareho.

Ang tunay na kahulugan ng pag-ugnay ng CSS

Komentaryo:Ang vertical margin ng mga bloke sa pangkaraniwang daloy ng dokumento lamang ang magiging pagkakasamahang pag-ugnay. Ang mga margin sa mga inline box, floating box, o absolute locate ay hindi magiging pagkakasamahang pag-ugnay.