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

249873 · 24 Ekim 2021

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.

Birhibile · 24 Ekim 2021

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.

249873 · 24 Ekim 2021

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;
}

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.

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

dgknbzglu · 24 Ekim 2021

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.

Birhibile · 24 Ekim 2021

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.

249873 · 25 Ekim 2021

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

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 · 25 Ekim 2021

[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]

Primearc · 25 Ekim 2021

outline: none; kodunu ikisine de ekleyip tekrar dene.

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

Ayrıntılı düzenleme

249873

Kilopat

Birhibile

Kilopat

249873

Kilopat

dgknbzglu

Megapat

Birhibile

Kilopat

249873

Kilopat

flayzeraynx

Hectopat

Primearc

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz