CSS tiqma

Shunday yozamiz.

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

Va natijani brauzerda ko'ramiz.

Salomatlik

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

Endi shunday yozamiz.

<div style="padding: 40px; border: 1px solid red">Salomatlik</div>

Va natijani brauzerda ko'ramiz.

Salomatlik

div ni ichida masofa paydo bo'ldi. Shu masofani tiqma deb ataymiz. Uyungizda yastiq bormi? Ichida nima bor? Patlarmi? O'sha patlar tiqma deb ataladi, chunki yastiqni ichiga tiqib qo'yiladi. Natijada yastiq kattayadi.

padding: 40px - 4 tomondagi tiqma 40px ga teng bo'ladi.

padding: 40px
padding: 40px

padding: 40px 50px 30px 15px - tepa tiqma 40px, o'n tiqma 50px, past 30px, chap 15px.

padding: 40px 50px 30px 15px
padding: 40px 50px 30px 15px

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

Brauzerda ko'ramiz.

Salomatlik

padding: 40px 30px 15px - tepa tiqma 40px, o'n tiqma 30px, past 15px, chap 30px.

padding: 40px 30px 15px
padding: 40px 30px 15px

padding: 40px 15px - tepa tiqma 40px, o'n 15px, past 40px, chap 15px.

padding: 40px 15px
padding: 40px 15px

Tiqmani boshqacha belgilasa ham bo'ladi.

<div style="padding-top: 40px; border: 1px solid red">Salomatlik</div>

Va natijani brauzerda ko'ramiz.

Salomatlik

padding-top tepa tiqmani belgilaydi.

<div style="padding-left: 40px; border: 1px solid red">Salomatlik</div>

Brauzerda ko'ramiz.

Salomatlik

padding-left chap tiqmani belgilaydi.

padding-right - o'n tiqma.

padding-bottom - past tiqma.

Yana misol.

<div style="padding-left: 40px; padding-bottom: 15px; border: 1px solid red">Salomatlik</div>

Brauzerda ko'ramiz.

Salomatlik

Yuqoridagi misolda chap tiqma 40px va past tiqma 15px.

Diqqat

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

Misol.

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

Tiqma ishlab ketdi.