CSS Satır İçi Blok (Inline-Block) - Onur KUL | Kişisel Blog

Bültenimize Katılın

En son gönderileri ve güncellemeleri doğrudan gelen kutunuza almak için abone listemize katılın

Abone Ol Hayır, teşekkürler
  1. Ana Sayfa
  2. CSS
  3. CSS Satır İçi Blok (Inline-Block)
CSS Satır İçi Blok (Inline-Block)

CSS Satır İçi Blok (Inline-Block) Nedir? CSS Satır İçi Blok (Inline-Block) Nasıl Kullanılır? CSS Satır İçi Blok (Inline-Block) Değerleri gibi soruların yanıtlarını bu yazımızda bulabilirsiniz.

CSS Şubat 16, 2022 0 4371 Okuma Listesine Ekle CSS Satır İçi Blok (Inline-Block)

CSS Satır İçi Blok (Inline-Block )

Bazı özel tasarımsal durumlarda, satır içi bir HTML ögesi gibi görüntülenen fakat blok bir HTML ögesi gibi biçimlendirilebilen içerikler oluşturmanız gerekecek. Bu durumlarda satır içi blok (inline-block) kullanabilirsiniz.

display: inline-block Değerleri

display: inline ile karşılaştırıldığında, en büyük fark, display: inline-block öğesinin öğe üzerinde bir genişlik ve yükseklik ayarlamasına izin vermesidir.

Ayrıca, display: inline-block kullanıldığında kenar boşluklarına ve iç boşluklara bağlı kalınır, ancak display: inline kullanımında kenar boşluklarına ve iç boşluklardan bağımsız hareket edilir.

display:block ile karşılaştırıldığında, en büyük fark, display: inline-block öğesinin öğeden sonra satır sonuna eklememesidir, böylece öğe diğer öğelerin yanına yerleştirilebilir.

Aşağıdaki örnek, display: inline, display: inline-block ve display:block'un farklı kullanımlarını göstermektedir.

Örnek: span.a { display: inline; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; }

Gezinme Bağlantıları Oluşturmak için Satır İçi Blok (Inline-Block) Kullanımı

Bu kullanım display: inline-block için yaygın bir kullanımdır. Liste öğelerini dikey yerine yatay olarak görüntülemenizi sağlar.

Aşağıdaki örnek, yatay gezinme bağlantıları oluşturmanızı sağlar.

Örnek: .nav { background-color: yellow; list-style-type: none; text-align: center; padding: 0; margin: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; }

Etiketler

  • CSS Satır İçi Blok (Inline-Block ) Nedir?
  • CSS Satır İçi Blok (Inline-Block )
  • CSS Satır İçi Blok (Inline-Block ) Kullanımı
  • CSS Satır İçi Blok (Inline-Block ) Özellikleri
  • CSS Satır İçi Blok (Inline-Block ) Nasıl Kullanılır?
  • CSS Satır İçi Blok
  • CSS Satır İçi Blok Nedir?
  • CSS Satır İçi Blok Kullanımı
  • CSS Satır İçi Blok Özellikleri
  • CSS Inline-Block
  • CSS Inline-Block Nedir?
  • CSS Inline-Block Kullanımı
  • CSS Inline-Block Özellikleri
  • CSS Inline-Block Değerleri
  • display: inline-block Değerleri
  • display: inline
  • display: inline-block
  • Gezinme Bağlantıları Oluşturmak için Satır İçi Blok Kullanımı
Facebook Twitter Whatsapp Linkedin Pinterest

Tepkiniz Nedir?

like 3

Beğendim

dislike 1

Beğenmedim

love 0

Sevdim

funny 0

Güldüm

angry 0

Kızdım

sad 0

Üzüldüm

wow 0

Şaşırdım

Onur KUL

Benzer Gönderiler

  • CSS Tablolar (Tables)

    CSS Tablolar (Tables)

  • CSS Görüntü Özellikleri (Display)

    CSS Görüntü Özellikleri (Display)

  • CSS Hizalama (Align)

    CSS Hizalama (Align)

  • Yorumlar
İsim E-posta Yorumlar Yorum Gönder

Popüler Gönderiler

  • CSS Yazı Tipleri (Fonts)

    CSS Yazı Tipleri (Fonts)

    Onur KUL Şubat 4, 2022 0 32099

  • CSS Hizalama (Align)

    CSS Hizalama (Align)

    Onur KUL Şubat 16, 2022 0 21817

  • Veri Tabanı Normalleştirme (Normalizasyon)

    Veri Tabanı Normalleştirme (Normalizasyon)

    Onur KUL Temmuz 31, 2022 2 18242

  • HTML Form Etiketleri

    HTML Form Etiketleri

    Onur KUL Şubat 6, 2021 0 15367

  • CSS İkonlar (Icons)

    CSS İkonlar (Icons)

    Onur KUL Şubat 5, 2022 0 9101

Seçtiklerimiz

Kategoriler

  • HTML(16)
  • CSS(38)
  • JavaScript(3)
  • PHP(19)
  • SQL(19)
  • T-SQL(9)
  • Bilgi Bankası(7)

Rastgele Gönderiler

img fixer PHP Nedir? PHP

PHP Nedir?

fixer PHP Numbers (Sayılar) PHP

PHP Numbers (Sayılar)

fixer SQL Union ve Union ALL SQL

SQL Union ve Union ALL

fixer CSS Sözde Sınıf (Pseudo-class) CSS

CSS Sözde Sınıf (Pseudo-class)

fixer JavaScript Nedir? JavaScript

JavaScript Nedir?

Etiketler

  • CSS Satır İçi Blok (Inline-Block ) Nedir?
  • PHP Continue
  • PHP nl2br()
  • Liste Öğesi İşaretçilerini Konumlandırma
  • PHP $_COOKIE Nedir?
  • Dikey Gezinti Çubuğu Oluşturma
  • <h5> Etiketi
  • (E-R Modelleri)
  • PHP Loops Nedir?
  • Parasal Veri Tipleri
  • HTML Paragraf Etiketi
  • Etiket Nedir?
  • PHP Foreach Örnekleri
  • PHP Koşullu Atama Operatörleri
  • PHP Echo ve Print

Từ khóa » Html Display Block Nedir