Margin Verildiğinde İki Div Arasındaki Fazla Boşluk Sorunu
Merhaba arkadaşlar. 1. resimde yani "index.php" sayfasında sepete ekle butonu ile ücretsiz kargonun olduğu div'in arasındaki boşluk ve 2. resimde aynı yerdeki boşluk birbirinden farklı. ürün eklendikçe "ücretsiz kargo" div'i aşağıya doğru inmesi gerekli. "margin-top:70px" verirsem "index.php" sayfasına tam oturuyor. Ama bu sefer 2. resimdeki gibi başka bir sayfaya tam gelmiyor. 3. resimde de "margin" vermediğim zamanki görüntüsü. Dikkat ederseniz 3. resimde ücretsiz kargo ile güvenli alışveriş arasında mavi bir buton var. Butonun üzerine geliyor. Resimler aşağıda. İlgili kodlar aşağıda.
https://www.hizliresim.com/iw08twy
https://www.hizliresim.com/5tqzk5b
https://www.hizliresim.com/s3dhj8h
.indexsayfasi-urunler {
width:100%;
height:auto;
}
.indexsayfasi-digerbilgiler {
width:100%;
height: auto;
}
.degisikbilgiler-div {
display:flex;
justify-content:space-between;
width:100%;
height:208px;
}
<div class="indexsayfasi-urunler">
<?php include "indexurunler.php"; ?>
</div>
</div>
<div class="indexsayfasi-digerbilgiler">
<?php include "indexdigerbilgiler.php"; ?>
</div>
Grid yapısını incelemini öneriyorum. Grid yapısını kullandığın zaman gap özelliği ile eşit aralıklarla aynı margin gibi boşluklar bırakabilirsin. Ayrıca neredeyse tüm tarayıcılar tarafından destekleniyor.
Önceden bazı tarayıcıların desteklememesi sebebiyle kullanılmıyordu fakat şuan kullanılmaması için hiçbir sebep yok. Tailwindcss de grid yapısını kullanıyor ve oldukça iyidir.