Divler arasında boşluğu nasıl kaldırırım?

HDÖ

Femtopat
Katılım
6 Eylül 2021
Mesajlar
75
1635075255510.png


Div kullanarak yapıyorum inline-block özelliği ile aralarında boşluk oluyor.

1635075473603.png


Position: Absolute ve Table ile de yapılabilir ama istemiyorum. Div'leri nasıl böyle bitişik ayarlayabiliriz veya farklı yöntem öneriniz var mı?
Not:
- Margin ve padding değerlerini 0'ladığım halde böyle görünüyor.
- Boderı da none yaptım.
 
Son düzenleyen: Moderatör:

Birhibile

Centipat
Katılım
26 Mart 2020
Mesajlar
333
Tarayıcının geliştirici özelliklerini (F12) kullanarak tarayıcı siteyi nasıl render'lamış görebilirsin. Ona göre neden böyle olduğunu tahmin edip düzeltebilirsin.

HTML vs CSS'i paylaşırsan daha rahat yardımcı olabiliriz.
 
KS
KS
H

HDÖ

Femtopat
Katılım
6 Eylül 2021
Mesajlar
75
HTML:
<div class="one">

</div>
<div class="two">

</div>

CSS:
*{
margin:0;
padding:0;
}
.one{
 width:300px;
 height:450px;
 display:inline-block;
background-color: red;
}
.two{
 width:300px;
 height:450px;
 display:inline-block;
background-color: blue;
}
Tarayıcının geliştirici özelliklerini (F12) kullanarak tarayıcı siteyi nasıl render'lamış görebilirsin. Ona göre neden böyle olduğunu tahmin edip düzeltebilirsin.

HTML vs CSS'i paylaşırsan daha rahat yardımcı olabiliriz.

F12'den zaten çok inceledim aradaki boşluğu temsil eden bir CSS bulunmuyor. Büyük ihtimal inline-block divleri arasında çerçeve payı bulunuyor ben bu çerçeve payını nasıl yok edeceğimi bulamıyorum.
Codepen linki : https://codepen.io/doukan-zkan-the-scripter/pen/abypajp
 

Birhibile

Centipat
Katılım
26 Mart 2020
Mesajlar
333
divler inline-block olduğu için HTML'de boşluk karakteride çiziliyor. Bir önceki </div> tag'i ile bir sonraki <div> tag'ini yan yana koyarsan problem çözülecektir.
 
KS
KS
H

HDÖ

Femtopat
Katılım
6 Eylül 2021
Mesajlar
75
CSS:
.one{
 width:300px;
 height:450px;
 float: left;
background-color: red;
}
.two{
 width:300px;
 height:450px;
 float: left;
background-color: blue;
}

Bu şekilde yan yana koyabilirsin. Eki Görüntüle 1197475

Hocam ben yazılıma yeni başadımda. Bootstrap derslerine geldim bana biraz kafa karıştırıcı geldi. Bootstrap bizim yapacaklarımızı kısıtlamaz mı? Yani sitelerin hepsi birbirinin kopyası olur o zaman yapılanların yazılımcıların bir anlamı kalmaz.

Bir de Float kullanımı hakkında bir şey sormam lazım ben floatı kullanınca arkasından gelen kodlarda kayma sorunu oluyor. Toparlayamıyorum arada boşluk verince düzeliyor ama responsive tasarımda boyutlar boşluklar değişince tekrar bozulmalar yaşanıyor.
 

flayzeraynx

Centipat
Katılım
3 Kasım 2020
Mesajlar
482
Makaleler
2
Çözümler
2
Yer
Istanbul
CSS:
body {margin: 0;}

.wrapper{
display: flex;
}

.one{
 width:300px;
 height:450px;
background-color: red;
}
.two{
 width:300px;
 height:450px;
background-color: blue;
}

HTML:
<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
</div>

1635112619474.png
 
Yukarı