<img> eleman blok seviyesi mi yoksa satır içi seviye mi?

163

Bu <img>öğenin her ikisi gibi davrandığı bir yerde okudum . Eğer doğruysa, birisi lütfen örneklerle açıklayabilir mi?

html css image

— understack
kaynak

189

Bu ikisi de doğrudur, ya da daha doğrusu, "satır içi blok" öğelerdir. Bu, metin gibi satır içi olarak aktıklarını, ancak blok öğelerine benzer genişlik ve yüksekliğe sahip oldukları anlamına gelir.

CSS'de, bir öğenin display: inline-blockgörüntülerin davranışını yinelemesi için ayarlayabilirsiniz *.

Görüntüler ve nesneler aynı zamanda "değiştirilen" öğeler olarak da bilinir, çünkü kendi başlarına içerik bulunmadığından, öğe temel olarak ikili verilerle değiştirilir.

* Tarayıcıların teknik olarak kullandıklarını display: inline(geliştirici araçlarında görüldüğü gibi), ancak resimlere özel bir tedavi sunduklarını unutmayın. Hala tüm özelliklerini takip ediyorlar inline-block.

— DisgruntledGoat
kaynak

Her zaman görüntülerin satır içi öğeler değil, satır içi bloklar olduğunu okudum, ancak genişlik ve yükseklik ekleme yeteneği nedeniyle satır içi blok olmaları mantıklı.

— Donato

22

Bu cevap teknik olarak doğru değil. Kesin olarak, imgunsurlar inline-blockaslında inlineunsurlar değildir . Bunu modern bir tarayıcıda bir görüntüyü sağ tıklayıp, "Elemanı incele" yi tıklayıp ardından görüntülenecek hesaplanan stili görüntüleyerek kontrol edebilirsiniz display: inline. Etiketin içinde herhangi bir blok bağlamı olmadığından, onu çağırmak doğru değildir inline-block. Değiştirilen satır içi öğeler hakkında daha fazla bilgi için Quentin yanıtına ve bu MDN makalesine bakın .

— Maximillian Laumeister

@Maks bağlantı, değiştirilen öğelerin satır içi olmasıyla ilgili hiçbir şey söylemez.

— DisgruntledGoat

@DisgruntledGoat Gönderdiğim bağlantı, imgöğelerin satır içi olduğunu söylemiyor - Google Chrome geliştirici araçları, imgöğelerin satır içi olduğunu gösteriyor. Bu yazı, şimdiye kadar bulduğum tek yer olduğunu söylüyor inline-block. İlginç bir şekilde, onların da olduğunu söyleyen bir otorite bulamadım inline. Belki de etikete uygulama nasıl davranılır?

— Maximillian Laumeister

2

@Max göre bu elementler CSS biçimlendirme modelin kapsamı dışındadır yerini aldı. HTML veya CSS spesifikasyonlarındaki hiçbir şey görüntülerin satır içi olduğunu belirtmez. Dolayısıyla, tarayıcının ne söylediğine bakılmaksızın, görüntüler tam olarak ayarlandıkları gibi ele alınır display:inline-block.

— DisgruntledGoat

53

Bir imgeleman, değiştirilen satır içi öğedir .

Satır içi bir eleman gibi davranır (çünkü), satır içi elemanlarla ilgili bazı genellemeler elemanlar için geçerli değildir img.

Örneğin

Genelleme: "Genişlik satır içi öğelere uygulanmaz"

Ne Spec aslında diyor : "Geçerlilik: bütün unsurları ancak yerleştirilmeyen satıriçi elemanlar, tablo satırları ve satır grupları"

Bir görüntü, değiştirilen satır içi öğe olduğundan, uygulanır.

— Quentin
kaynak

13

IMG öğeleri satır içi, yani kayanlar metin ve diğer satır içi öğelerle yatay olarak akacaklardır.

Genişlik ve yüksekliğe sahip olmaları nedeniyle "blok" elementlerdir. Ama bu açıdan daha çok "satır içi blok" gibi davranıyorlar.

— Robusto
kaynak

7

Neredeyse tüm amaçlar için bunları bir genişlik ayarlı satır içi eleman olarak düşünün. Temel olarak görüntülerin CSS kullanarak nasıl görüntülenmesini istediğinizi belirtebilirsiniz. Genellikle böyle birkaç görüntü sınıfları ayarlayın:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

— Montana Flynn
kaynak

2

Bir görüntü eklediğinizde, görüntünün başlangıçtaki genişliği alınır. Yanına başka bir html öğesi ekleyebilir ve buna izin vereceğini göreceksiniz. Bu, görüntüyü "satır içi" bir öğe yapar.

— Avatar
kaynak

0

Bu ikisi de doğrudur, ya da daha doğrusu, "satır içi blok" öğelerdir. Bu, metin gibi satır içi olarak aktıklarını, ancak blok öğelerine benzer genişlik ve yüksekliğe sahip oldukları anlamına gelir.

— Modaser Sadat
kaynak