CSS'te display:block ve inline-block ne zaman kullanılmalı ?

25-12-2017, 16:21:03

Üyeliği durduruldu

Merhabalar,
Arkadaşlar tasarım yaparken neredeyse bunları hiç kullanmıyorum. Nerelerde ne için kullanılır bilmiyorum. Bi anlatabilir misiniz ? Örneklerle. Kullanırsak ne olur ? Kullanmazsak ne olur ?
Şimdiden teşekkür ederim.

25-12-2017, 16:31:39

#2

FurkanB

https://www.youtube.com/watch?v=0G1Q7wRjuTA
umarim faydasini gorursunuz.

25-12-2017, 18:08:05

#3

Onur89TR

Araştırmaktan çok sormak bazı insanların kolayına geliyor. Günde birkaç konu açıp da forumda gereksiz sorular soranlar çok maalesef. Halbuki Google denen bir şey var. Biz neden "We love Google" diyoruz? Sadece ondan para kazanmak için mi? Yoksa aradığımız her şeyi burada bulabildiğimiz için mi?
https://www.google.com.tr/search?q=d...ock+difference

25-12-2017, 18:09:39

#4

~~angelicmoon~~

Üyeliği durduruldu

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Araştırmaktan çok sormak bazı insanların kolayına geliyor. Günde birkaç konu açıp da forumda gereksiz sorular soranlar çok maalesef. Halbuki Google denen bir şey var. Biz neden "We love Google" diyoruz? Sadece ondan para kazanmak için mi? Yoksa aradığımız her şeyi burada bulabildiğimiz için mi?
https://www.google.com.tr/search?q=d...ock+difference

Google'a sormayı bende biliyorum. Display ve inline ın ne işe yaradığını da biliyorum. Sadece mantığını öğrenmek ince bilgiyi almak için buradan sordum. Cevabınız için teşekkürler.

25-12-2017, 21:21:52

#5

Hunper

Örneğin bir menü yapıyorsunuz diyelim. Menü elemanlarını float:left yerine display:inline-block ile yan yana sıralayabilirsiniz, bu ne işe yarar derseniz menü elemanlarını ortalamak isterseniz float:left ile sıraladığınız menünün üst elemanına text-align:center verirseniz içerik ortalanmaz ancak display:inline-block kullanırsanız içeriği ortalayabilirsiniz. Bu ortalama işlemini sadece menü için düşünmeyin örneğin sayfada birçok defa kullanılacak aynı tip buton var diyelim, bu butona display:inline-block değeri verirseniz üst elemana bağlı istediğiniz şekilde sağa, sola veya ortaya hizalayabilirsiniz(herhangi bir width kullanmadan). Veya ul elemanına sıfırlama yapmanız gerekir, display:block; margin:0; padding:0; olarak kullanabilirsiniz.
Display'in farklı kullanışları da vardır, örneğin table özelliği. display:table; width:100%; verdikten sonra alt elemanlara display:table-cell; vertical-align:middle; verirseniz içerikler dikey ortalanacaktır. Tabi height değeri verirseniz bu height değerine bağlı ortalanır. Vermez iseniz aynı seviyedeki elemanlara göre ortalanır.
Display:none ve display:block'u da basitinden css ile hazırlanmış bir açılır menü yapmak için kullanabilirsiniz.
a veya span gibi padding ve margin değerlerini alamayan elemanlar için de kullanılır. Hatta belki de en sık kullanımı bu şekildedir.
Birçok yerde kullanılabilir yani.

26-12-2017, 09:10:47

#6

~~angelicmoon~~

Üyeliği durduruldu

Hunper adlı üyeden alıntı: mesajı görüntüle

Örneğin bir menü yapıyorsunuz diyelim. Menü elemanlarını float:left yerine display:inline-block ile yan yana sıralayabilirsiniz, bu ne işe yarar derseniz menü elemanlarını ortalamak isterseniz float:left ile sıraladığınız menünün üst elemanına text-align:center verirseniz içerik ortalanmaz ancak display:inline-block kullanırsanız içeriği ortalayabilirsiniz. Bu ortalama işlemini sadece menü için düşünmeyin örneğin sayfada birçok defa kullanılacak aynı tip buton var diyelim, bu butona display:inline-block değeri verirseniz üst elemana bağlı istediğiniz şekilde sağa, sola veya ortaya hizalayabilirsiniz(herhangi bir width kullanmadan). Veya ul elemanına sıfırlama yapmanız gerekir, display:block; margin:0; padding:0; olarak kullanabilirsiniz.
Display'in farklı kullanışları da vardır, örneğin table özelliği. display:table; width:100%; verdikten sonra alt elemanlara display:table-cell; vertical-align:middle; verirseniz içerikler dikey ortalanacaktır. Tabi height değeri verirseniz bu height değerine bağlı ortalanır. Vermez iseniz aynı seviyedeki elemanlara göre ortalanır.
Display:none ve display:block'u da basitinden css ile hazırlanmış bir açılır menü yapmak için kullanabilirsiniz.
a veya span gibi padding ve margin değerlerini alamayan elemanlar için de kullanılır. Hatta belki de en sık kullanımı bu şekildedir.
Birçok yerde kullanılabilir yani.

Çok teşekkür ederim. İşte aradığım cevap.

28-12-2017, 13:23:18

#7

lovemove

Hunper adlı üyeden alıntı: mesajı görüntüle

Örneğin bir menü yapıyorsunuz diyelim. Menü elemanlarını float:left yerine display:inline-block ile yan yana sıralayabilirsiniz, bu ne işe yarar derseniz menü elemanlarını ortalamak isterseniz float:left ile sıraladığınız menünün üst elemanına text-align:center verirseniz içerik ortalanmaz ancak display:inline-block kullanırsanız içeriği ortalayabilirsiniz. Bu ortalama işlemini sadece menü için düşünmeyin örneğin sayfada birçok defa kullanılacak aynı tip buton var diyelim, bu butona display:inline-block değeri verirseniz üst elemana bağlı istediğiniz şekilde sağa, sola veya ortaya hizalayabilirsiniz(herhangi bir width kullanmadan). Veya ul elemanına sıfırlama yapmanız gerekir, display:block; margin:0; padding:0; olarak kullanabilirsiniz.
Display'in farklı kullanışları da vardır, örneğin table özelliği. display:table; width:100%; verdikten sonra alt elemanlara display:table-cell; vertical-align:middle; verirseniz içerikler dikey ortalanacaktır. Tabi height değeri verirseniz bu height değerine bağlı ortalanır. Vermez iseniz aynı seviyedeki elemanlara göre ortalanır.
Display:none ve display:block'u da basitinden css ile hazırlanmış bir açılır menü yapmak için kullanabilirsiniz.
a veya span gibi padding ve margin değerlerini alamayan elemanlar için de kullanılır. Hatta belki de en sık kullanımı bu şekildedir.
Birçok yerde kullanılabilir yani.

+1
float kullanımı yerine display kullanmak işleri kolaylaştıracak ve daha esnek hareket etmenizi sağlayacaktır. Float çok çok eskide kaldı.. Sadece hizalamak için kullansanız bile sonunda clear:both yapıp bir başka elemana sıçramasını engellemek gerekiyor..