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

2

249873

Kilopat
Katılım
17 Şubat 2019
Mesajlar
5.050
Çözümler
20


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.
 
Son düzenleyen: Moderatör:
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.
 
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;
}

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
 
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.
 
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: 
.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.
 
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…