CSS hoshiya muammolari

Qatordagi unsurlar

Tepa va past hoshiya qatordagi unsurlar bilan ishlamaydi. Ishlashi uchun qator unsurlarga display: inline-block ni qo'shish kerak. Bu to'g'risida o'zini darsida yozilgan edi.

Hoshiya qulashi 1

Ikkinchi hoshiyaning muammosini hoshiya qulashi deb ataymiz.

Misol.

<div style="margin-bottom: 5px">Salom</div>
<div style="margin-top: 50px">Salom</div>
Salom
Salom

Endi misolni o'zgartiramiz.

<div style="margin-bottom: 50px">Salom</div><div style="margin-top: 50px">Salom</div>
Salom
Salom

margin-bottom ni 5px dan 50px gacha o'zgartirdik. Natija o'zgardimi?

Birinchi misolda "Salom" lar orasida masofa qancha bo'lishi kerak edi? 55px?
Ikkinchi misoldachi? 100px? Lekin masofa o'zgarmadiku. Birinchi misolda qanday masofa bo'lsa, shunday masofa ikkinchi misolda qoldi. Nimaga shunday?

Gap shundaki ikkita tik hoshiya (tepadagi yoki pastdagi) bir biriga tegib qo'lsa, kichigi yo'q bo'lib ketadi.

Birinchi misolda 5 pikselli va 50 pikselli hoshiyalar bir biriga tegib turibdi. Shu deb kichigi (5 pikselli) yo'q bo'lib ketadi. Natijada faqat 50 pikselli hoshiya qoladi. Va ikkita salom orasida masofa 50px ga teng bo'ladi.

Ikkinchi misolda esa ikkita 50px li hoshiya bir biriga tegib turibdi. Bittasi yo'q bo'lib ketadi, va bittasi qoladi. Natijada ikkita salom orasida masofa 50px ga teng bo'ladi.

Etibor bering, bu qoida faqat tepa va past hoshiyaga tegishli.

Hoshiya qulashi 2 (hoshiya chiqib ketishi)

Hoshiya qulashining ikkinchi tarafi bor.

<section style="background-color: red">
    <div style="
        margin-bottom: 50px;
        margin-top: 50px;
        background-color: pink;
    ">
        Salom
    </div>
</section>

section bu div kabi ishlaydigan oddiy g'o'la unsurdir.

Brauzerda ko'ramiz.

Salom

Nima bo'ldi? Noto'g'ri ishlayaptimi? Menimcha quyidagicha chiqishi kerak edi.

Salom

Bu ham hoshiyaning muammolaridan biri. Gap shundaki, tik hoshiya (tepa va past hoshiya) ota unsurining ichidan chiqib keta oladi. Ha, shunday, chiqib keta oladi. Tasavvur qiling!

Xullas shu yuqoridagi "noto'g'ri ishlayatgan" misolda aynan shuni ko'ryapmiz. divning tepa va past hoshiyasi otasidan (section) tashqariga chiqib ketyapti. Otasining tashqarisiga chiqib ketmasligi uchun har xil usullardan foydalansa bo'ladi.

Yechim 1

Birinchi yeshim - otasiga overflow: hidden berish.

Ko'ramiz.

<section style="
    background-color: red;
    overflow: hidden;">
    <div style="
        margin-bottom: 50px;
        margin-top: 50px;
        background-color: pink;
    ">
        Salom
    </div>
</section>

Brauzerda ko'ramiz.

Salom

Endi divning hoshiyasi section otasidan tashqariga chiqib ketmayapti, natijada section ishib qoldi.

Yechim 2

Ikkinchi yechim - otasiga chegarani yoki tiqmani berish.

Ko'ramiz.

<section style="
    background-color: red;
    border: 1px solid black;">
    <div style="
        margin-bottom: 50px;
        margin-top: 50px;
        background-color: pink;
    ">
        Salom
    </div>
</section>

Brauzerda ko'ramiz.

Salom

Shunda chegara yoki tiqma qafas sifatida ishlaydi, va hoshiyaga chiqib ketishiga yo'l bermaydi.