DEV Community

Miss_code_creaker
Miss_code_creaker

Posted on

Css da "Display" xossasi.

Display - elementlarimizni veb sahifamizda qanday ko'rsatilishini belgilaydi.

Qiymatlari:
● Block - element block elementga xos xususiyatga ega bo'ladi. Ya'ni qiymatiga block ko'rsatadigan bo'lsak, element block qiymatiga ega bo'ladi.

<style>
   .to-block {
        Display: block;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
<a href="#" class="to-block">"Block" elementga aylantirish</a>
Enter fullscreen mode Exit fullscreen mode

● Inline - element inline elementga xos xususiyatga ega bo'ladi.

<style>
   .to-inline {
        Display: inline;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
<h1 href="#" class="to-inline">"Inline" elementga aylantirish</h1>
Enter fullscreen mode Exit fullscreen mode

● Inline block - inline elementga o'xshab faqatgina kontenti uchun yetarli bo'ladigan ega bo'ladi va yonma-yon joylashadi. Qo'shimcha ravishda, block elementga o'xshab width, height, margin/padding - top, margin/padding - bottom xossalarini qabul qilishi mumkin bo'ladi.

<style>
   .to-inline-block {
        display: inline-block;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
<span class="to-inline-block">"Inline block"elementga aylantirish</span>
Enter fullscreen mode Exit fullscreen mode

● None - elementni veb sahifamizda berkitib turadi.

<style>
   .to-none {
        display: none;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
<span class="to-none">Bu element ekranda ko'rinmaydi</span>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)