v2.5.2
Giriş yap

display flex div içinde ki resim altında boşluk kalıyor. [ Çözüldü ]

kartal
1,266 defa görüntülendi
7

display flex uygulanmış div içinde display flex olmayan ikinci bir div var onun içinde ki resim altında ince bir boşluk kalıyor resmi display blok yapınca düzeliyor birde ikinci divede display flex yapınca düzeliyor. Yanlışmı yapıyorum sizce. Acaba display flex uygulanan div içinde ki bütün divlerede flex mi yapılmalı.

css
Cevap yaz
Cevaplar (7)
kartal
1614 gün önce

Soruyu doğru olarak işaretleyemedim uzman cevapta vardı. Tayfun Erbilen ya çok yoğun yada boşladı mı artık bizi bilemedim neyse :)

0
#001615
kartal
1614 gün önce

codepacks-> 1.si olmadı ikincisi line-height 0 yapınca oldu birde img display block yapınca oluyor sorun yok yani. Tabii bunun bir standardı vardır artık farklı tarayıcılarda test edicez bakalım.

0
#001614
codepacks
1620 gün önce

çözüm 1

birinci {
margin: 0;
padding: 0;
clear: both;
}
imgdiv {
margin: 0;
padding: 10;
background-color: #111;
}

çözüm 2

kullanımı line-height

birincil { line-height: 0px; }

kullanımı display: flex

birincil { display: flex; }

yeni birincil { display: inline-flex; }

Kullanımı display: block, table, flex, inherit

birincil imgdiv { display: block; }

birincil imgdiv { display: table; }

birincil imgdiv { display: flex; }

birincil imgdiv { display: inherit; }

0
#001596
kartal
1620 gün önce

arco kodları örnek olarak yazdım boşluk bırakmak istemiyorum aslında dive border verdiğimde alttaki boşluk belli oluyor img display bloc verince düzeliyor ama sorun display flex uygulamasından mı kaynaklı baştan sağlam yapayım dedim yoksa düzeltiyorum ama farklı platformlarda yine boşluk kalabilir.
Mesela display flex verdiğim div içindeki resmi saran dive de display flex verince düzeliyor yada resme display blok yapıncada düzeliyor ama hangisi doğru

0
#001593
arco
1620 gün önce

.imgdiv img{
margin-bottom: 5px;
margin-top: 5px;
}
dener misin hocam bi

0
#001590
kartal
1620 gün önce

Merhaba örnek olarak şu kodları gösterebilirim.
Padding değerini özellikle verdim vermesem de altta bir boşluk oluyor.
<!DOCTYPE html>
<html>
<head>

<title></title>
<style type="text/css">
	.birinci {display: flex;width: 100%;}
	.imgdiv {padding: 10px;background-color: #111;}
</style>

</head>
<body>

<div class="birinci">
	
	<div class="imgdiv">
		<img src="images/Penguins.jpg">
	</div>
</div>

</body>
</html>

0
#001589
codepacks
1621 gün önce

div içerik ve css kodlarını yazarsanız yardımcı olabirim ama aklınızda bulunsun
<p> etiketleri normalde 1m seviyesine ayarlıdır
divin içerdiği css dosyasındaki alanda
margin bottom , margin top gibi değerler vardır içereğin css etiketlerini düzenleyebilirsin

0
#001586