Biswal na Modelo ng CSS Box

Aktuwal na CSS pixel ang diagram. Mag-scroll para makita ang malaking kahon. Lapad at taas: 1–1,200; pare-parehong puwang: 0–100 px.

Panlabas na puwang
Kapal ng hangganan
Panloob na puwang
Sukat ng nilalaman

Paano gamitin

Itakda ang lapad at taas sa 1–1,200 px at pantay na panlabas na puwang, hangganan at panloob na puwang sa 0–100 px.
Piliin ang kahon ng nilalaman o kahon kasama ang hangganan at suriin ang mga patong at sukat.
Kopyahin ang CSS o ibalik ang mga halaga. Binubura ng blangko o maling halaga ang resulta at pinapatigil ang pagkopya.

Mga pormula ng sukat

content-box: nilalaman=nakatakdang sukat; elemento=nakatakdang sukat+2×(panloob na puwang+hangganan). border-box: elemento=max(nakatakdang sukat, 2×(panloob na puwang+hangganan)); nilalaman=max(0, nakatakdang sukat−2×(panloob na puwang+hangganan)). Pareho: kabuuan=elemento+2×panlabas na puwang. Hiwalay na kalkulahin ang lapad at taas.

Pinakamaliit na sukat at saklaw

Punan ang lahat ng halaga ng may hangganang numero sa saklaw. Kung higit ang panloob na puwang at hangganan sa nakatakdang border-box, zero ang nilalaman at minimum na espasyo ang sukat ng elemento. Nasa labas ang panlabas na puwang.

Sukat ng diagram

Isang CSS pixel bawat nakalkulang pixel; hindi ito pinaliliit para magkasya. 360 CSS pixel ang taas ng scrollable na lugar. Mag-scroll nang pahalang o patayo para makita ang malaking kahon. Tahasang content-box ang bawat patong, walang dagdag na puwang o minimum na sukat ng nilalaman. Ipinapaliwanag ng legend ang kulay.

Mga madalas itanong

Maaari mo ring alamin

Pinaliliit ba para magkasya ang diagram?

Hindi. Aktuwal na CSS pixel ang gamit; i-scroll kapag mas malaki sa lugar. Hindi binabago ang nakalkulang CSS na sukat.

Pinapalaki ba ng panlabas na puwang ang elemento?

Dinadagdagan nito ang espasyo sa labas, hindi ang aktuwal na sukat ng elemento. Pantay na puwang lamang ang modelo; hindi kasama ang margin collapse o likas na sukat ng nilalaman.