CSS hoshiya

Shunday yozamiz.

<div style="border: 1px solid red">Mehribonlik</div>

Va natijani brauzerda ko'ramiz.

Mehribonlik

Chegara paydo bo'ldi. Chegarani oldingi darslardan birida o'rgandik.

Endi shunday yozamiz.

<div style="margin: 40px; border: 1px solid red">Mehribonlik</div>

Va natijani brauzerda ko'ramiz.

Mehribonlik

Nimani ko'ryapmiz? Qizil to'rtburchakdan o'ynachaning chetigacha bo'lgan masofa o'sdi.

Endi shunday yozamiz.

<div style="margin: 20px; border: 1px solid red">Mehribonlik</div>

Va natijani brauzerda ko'ramiz.

Mehribonlik

Nimani ko'ryapmiz? margin xususiyatining qiymati 40px dan 20px gacha kichraygani tufayli masofa ham kichraydi.

Shu margin xususiyatini hoshiya deb ataymiz. Maktabda daftaringizning chetida hoshiyalar bor ediku? Mana, margin ham shunga o'xshagan narsa.

margin: 40px degani 4-ta tomonda masofa 40px. Tepada masofa 40px, o'nda 40px, pastda 40px, chapda 40px.

margin: 40px
margin: 40px

To'rttali yozuv

margin: 40px 50px 30px 15px - tepadagi hoshiya 40px, o'ndagi 50px, pastdagi 30px, chapdagi 15px.

<div style="margin: 40px 50px 30px 15px; border: 1px solid red">Mehribonlik</div>

Brauzerda ko'ramiz.

Mehribonlik

Qanday margin: 40px 50px 30px 15px ishlaydi? Quyidagi rasmda tushuntirilgan.

margin: 40px 50px 30px 15px
margin: 40px 50px 30px 15px

Uchtali yozuv

margin: 40px 30px 15px - tepada 40px, o'nda 30px, pastda 15px, chapda 30px hoshiya.

<div style="margin: 40px 30px 15px; border: 1px solid red">Mehribonlik</div>

Brauzerda ko'ramiz.

Mehribonlik

margin: 40px 30px 15px
margin: 40px 30px 15px

Ikkitali yozuv

margin: 40px 15px - tepada 40px, o'nda 15px, pastda 40px, chapda 15px hoshiya.

margin: 40px 15px
margin: 40px 15px

Bir tomon hoshiya

margin-left chapdagi hoshiyani belgilaydi.

<div style="margin-left: 20px; border: 1px solid red">Mehribonlik</div>

Brauzerda ko'ramiz.

Mehribonlik

margin-top tepadagi hoshiyani belgilaydi.
margin-right o'ndagi hoshiyani belgilaydi.
margin-bottom pastdagi hoshiyani belgilaydi.

Yuqoridagi xususiyatlarni birlashtirsa bo'ladi.

<div style="margin-top: 25px; margin-left: 20px; border: 1px solid red">Mehribonlik</div>

Brauzerda ko'ramiz.

Mehribonlik

Diqqat

Tepa va past hoshiya qatordagi unsurlar bilan (a, span, strong, em, img va hokazo) ishlamaydi. Buni to'g'rilash uchun qatordagi unsurlarga display: inline-block xususiyatini beringlar.

Misol.

<a href="https://sinf.subh.org" style="
    margin-top: 100px; 
    margin-bottom: 100px; 
    background-color: red;
">O'quv markazidagi darslarimga yoziling</a>

Yuqoridagi misolda ko'rib turganingizday tiqma to'g'ri ishlamayapti. Ammo misolni sal o'zgartirsak.

<a href="https://sinf.subh.org" style="
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: red;
    display: inline-block;">O'quv markazidagi darslarimga yoziling</a>

Tiqma ishlab ketdi.