css: girdi elemanları arasında

Question

boşluk azaltmak için nasıl olduğunu ben her girişi arasında 5 piksel boşluk gibi var ve bunu 1px için ayarlamak istediğiniz

<div> 
     <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" /> 
     <input class="minimize" value="_" type="button"> 
     <input class="close" value="x" username="_id_" type="button"> 
</div> 

.

Kenar boşluğu ve dolgu ile hiçbir başarıya ulaşmaya çalıştım: herhangi bir ipucu?

reagrdfs

Answer 1

Bu sadece etiketleri arasındaki tüm beyaz boşluk çıkarmak, ya da sadece ana unsuru üzerinde font-size: 0; kullanabilirsiniz ya çünkü white-space bulunuyor. Ayrıca ama kullanmayı tavsiye etmem margin-left: -4px; kullanabilirsiniz:

Demo

Demo (ebeveyn üzerinde font-size: 0; kullanma/sarıcı eleman)

---

Not (elemanları arasında boşluk Çıkarma) Bu üst öğe, font-size200% olarak ayarlanmışsa, yeniden beyaz boşluk oluşturacaktır - Demo

Answer 2

Girdi, satır içi bir öğe olduğu için kenar boşluğu ve dolgu çalışmaz. Dolgu ve kenar boşluğu kullanmak için satır içi veya blok bir öğe girmeniz gerekir.

Answer 3

boşluk her bir öğe arasındaki satır sonları kaynaklanır: Bunu düzeltmek için

<div> 
    <input /> <!-- White Space --> 
    <input /> <!-- White Space --> 
    <input /> 
</div> 

, quite a lot of options vardır. yalnız HTML ile sadece bir satır üzerine tüm input öğeleri taşıyabilirsiniz:

<div> 
    <input /><input /><input /> 
</div> 

Diğer bir seçenek kabından yazı tipi boyutunu kaldırmak için CSS biraz kullanmak olacaktır:

div { 
    font-size:0; /* The white space has no size, therefore isn't visible. */ 
} 

input { 
    font-size:16px; /* We restore the font size here. */ 
} 

Answer 4

budur HTML kodunuzdaki boşluk nedeniyle. Birçok CSS hilesi var, ancak görüntülenen bir boşluktaki boşlukları kaldırmak için sadece CERTAIN yolu ... HTML'den kaldırmanızdır. Bir HTML açıklama ile

(ve bir açıklama var neden 2 ay veya iş arkadaşları veya müşteri kendiniz için bir açıklama: "hayır boşluk") liste öğelerinin ile

<div> 
     <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" /><!-- no whitespace 
     --><input class="minimize" value="_" type="button"><!-- no whitespace 
     --><input class="close" value="x" username="_id_" type="button"> 
</div> 

, ayrıca etiketi kapanış koyabilirsiniz sonraki satır ama bu girdilerin :)

<ul> 
     <li>aaa 
     </li><li>bbb 
     </li><li>ccc 
     </li><li>lorem ipsum 
     </li><li>dolor sit amet</li> 
</ul> 

için yararsız bir sonraki satırda da yakın eleman inanabilirim:

<div> 
     <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" 
     ><input class="minimize" value="_" type="button" 
     ><input class="close" value="x" username="_id_" type="button"> 
</div> 

Ben sadece ilk yöntemi kullandığım mükemmel girinti alışkınım ...