Koks skirtumas tarp blokavimo ir eilinių elementų?

Question

Accepted Answer

Kiekvienas elementas turi numatytą **display** elgesį, kuris kontroliuoja, kaip jis teka iš jų. - **Bloko** elementai prasideda **naujoje eilutėje** ir užima **visą galimą plotį**. Jie priima plotį/aukštį ir visas paraštės/padėlių. Pavyzdžiai: `

`, `

`, `
`, `
`. - Eiliniai elementai teka eilutės viduje, tik jų turinio pločio, ir nepaisydami pločio/aukščio ir viršutinės/apatinės paraštės. Pavyzdžiai: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Praktinis spąstas ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` `width`/`height` nustatymas eiliniam elementui nieko nedaro. Gydymas yra pakeisti jo display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — geriausias iš abiejų `inline-block` sėdi teksto srautą (vienas šalia kito) ir* pagarba pločio/aukščio/paraščiam — puikiai tinka navigacijos elementams, ženkliams ar mygtukams, išdėstytiems eilutėje. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Kodėl tai svarbu Supratimas apie numatytą ekraną paaiškina, kodėl jūsų `` neims aukščio, kodėl `
` sukaupia, ir kada turėtumėte pereiti prie `inline-block`, `flex` ar `grid`. Tai pagrindas, kaip elementai susitvarko prieš pritaikydami bet kurią išdėstymo sistemą.