CSS Academy · Ders

Block, Inline ve Inline-Block

block, inline ve inline-block görüntüleme davranışları arasındaki farkları anlayın.

Block, Inline ve Inline-Block, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

display Özelliği

display özelliği, CSS'teki en temel özelliklerden biridir. Bir öğenin yerleşim akışına nasıl katılacağını; blok düzeyinde bir kutu, satır içi bir kutu veya bunların arasında bir yapı oluşturup oluşturmayacağını belirler.

Blok Öğeler

Blok öğeler yeni bir satırda başlar ve kapsayıcılarının tüm genişliğini dolduracak şekilde uzar. Genişliği, yüksekliği, dış boşluğu ve dolguyu tüm kenarlara uygulayabilirsiniz.

Varsayılan blok öğeler: div, p, h1-h6, section, article.

<div>I'm a block element — full width, centered.</div>

Satır İçi Öğeler

Satır içi öğeler metnin içinde akış gösterir. Yeni bir satırda başlamazlar. width veya height ayarlamanın hiçbir etkisi yoktur. Üst ve alt dış boşluklar yok sayılır; yatay dış boşluklar ve dolgular çalışır.

Varsayılan satır içi öğeler: span, a, strong, em, img.

<p>This is <span>an inline span</span> inside a paragraph.</p>

Satır İçi Blok Öğeler

display: inline-block karma bir yapıdır. Öğeler satır içinde akış gösterir (zorunlu satır sonu eklenmez), ancak blok öğeler gibi genişliği, yüksekliği ve tüm kutu modeli özelliklerini destekler.

<a class="btn" href="#">Click Me</a>

Gezinme için Satır İçi Blok

Flexbox'tan önce yatay gezinme çubukları için inline-block kullanılırdı. Dezavantajı, HTML kaynak kodundaki boşlukların öğeler arasında küçük aralıklar oluşturmasıdır.

<ul><li>Home</li><li>About</li><li>Contact</li></ul>

Satır İçi Boşluğu Kaldırma

Satır içi blok öğeler arasındaki boşluk, üst öğede font-size: 0 ayarlanıp alt öğelerde eski değeri geri yüklenerek veya HTML'deki boşluklar kaldırılarak yok edilebilir.

<ul><li>One</li><li>Two</li><li>Three</li></ul>

Satır İçi Bloğu Flex ile Değiştirme

Modern CSS'te, boşluk sorunları olmadan yatay yerleşimler oluşturmanın tercih edilen yolu, üst öğede display: flex kullanmaktır. inline-block ise tek öğelerin boyutlandırılmasında hâlâ kullanışlıdır.

display Değerini Değiştirme

Herhangi bir öğenin display türü CSS ile değiştirilebilir. Bu yöntem, bağlantıları düğme şeklinde göstermek veya liste öğelerini yatay hâle getirmek için yaygın olarak kullanılır.

<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>

Tablo display Değerleri

CSS; tablo yerleşimini tablo olmayan öğelere uygulamak için display: table, display: table-row, display: table-cell gibi değerler sunar. Günümüzde nadiren gerekir; ancak eski bağlamlarda dikey hizalama için kullanışlıdır.

Akış Kökü: display: flow-root

display: flow-root, overflow: hidden yan etkileri olmadan yeni bir blok biçimlendirme bağlamı oluşturur. Kayan öğeleri temizler ve dış boşluk birleşmesinin bir kapsayıcı dışına sızmasını önler.

<div class="clearfix">Contains floated children without collapsing.</div>

Anonim Kutular

Blok ve satır içi öğeler kardeş olarak karıştırıldığında tarayıcı, sahipsiz satır içi içeriği anonim blok kutularına sarar. Bu davranış görünmezdir; ancak beklenmeyen yerleşim kaymalarını açıklar.

Kısa Kontrol

Hangi display değeri, öğeyi satır içi akışta tutarken width ayarlamanıza olanak tanır?

Özet

Blok öğeler tüm genişliği kaplar ve yeni bir satırda başlar. Satır içi öğeler metinle birlikte akış gösterir ve genişlik/yükseklik değerlerini yok sayar. Satır içi blok, ikisini birleştirir: satır içinde akış gösterir, ancak genişlik ve yüksekliği kabul eder. Modern yerleşimlerde satır içi blok ızgaraları yerine Flexbox ve Grid tercih edilir.

Sıkça Sorulan Sorular

“Block, Inline ve Inline-Block” dersi ücretsiz mi?

Evet — “Block, Inline ve Inline-Block” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Block, Inline ve Inline-Block” dersinde ne öğreneceğim?

block, inline ve inline-block görüntüleme davranışları arasındaki farkları anlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Block, Inline ve Inline-Block” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön