Bu yazımızda satır içi blok elemanları özelliğini ele alacağız. CSS'nin çok kullanışlı bir özelliğidir. Bunu çeşitli etiketlere uygulayabiliriz. CSS görüntüleme özelliğinin bir parçasıdır.
Java'daki diziler
Kullanımı:
display: inline-block
Yukarıdaki özelliğin uygulanmasıyla öğe, alt öğeleri için satır içi ve blok gibi davranacaktır. Satır içi ve blok elemanlarını anlayalım.
Satır İçi Öğeler
Yeni bir satırda başlamayan öğelere satır içi öğeler denir. Ayrı bir eylem olarak değil, ana metnin bir parçası olarak birleştirilirler. Bu öğeler yalnızca gerekli alanı kaplar. Satır içi öğeye sol ve sağdaki boşluklar eklenebilir, ancak satır içi öğenin üst veya alt dolgusuna veya kenar boşluğuna yükseklik eklenemez.
Satır içi öğelere örnek:
Örnek:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Çıktı:
java dize yöntemine
Blok Elemanları
Yeni bir satırda başlayan elemanlara blok elemanlar denir. Bir blok öğesi, söz konusu içerik için mevcut olan tam genişliği elde eder. Satır içi'nin aksine, bu öğeler için bir üst ve alt kenar boşluğu vardır. Blok düzeyindeki öğeler yalnızca gövde etiketinin içinde görünebilir. Blok düzeyindeki öğeler, satır içi öğelerden daha büyük bir yapı oluşturur.
Blok elemanlarına örnek:
,
pete davidson'ın yaşı
Örnek:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Çıktı:
Java dizisine ekleme
Satır İçi Blok Elemanları
inline-block'un görüntüleme değeri, bir istisna dışında inline'a benzer şekilde çalışır: o öğenin yüksekliği ve genişliği değiştirilebilir hale gelir.
Örnek:
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Çıktı:
Aşağıda tüm öğelerin tek bir sayfada kullanıldığı çıktı dosyası verilmiştir:
Kod
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>