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

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



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.

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.

Birhibile dedi:

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.

Genişletmek için tıkla...

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

Bu şekilde yan yana koyabilirsin.

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.

dgknbzglu dedi:

CSS:Panoya kopyala

.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

Genişletmek için tıkla...

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.

[CODE lang="css" title="CSS"]body {margin: 0;}

.wrapper{
display: flex;
}

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

[CODE lang="html" title="HTML"]<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>[/CODE]

outline: none; kodunu ikisine de ekleyip tekrar dene.