मैं दो इनपुट फ़ील्ड के बीच मार्जिन को हटा नहीं सकता

Question

मैं खोज बार और "जाओ!" के बीच मार्जिन को हटाने का प्रयास कर रहा हूं। इस पृष्ठ के शीर्ष पर बटन: http://beta.linksku.com/

मैंने सभी शैलियों को हटाने और margin:0;padding:0;border:none; जोड़ने का प्रयास किया है, लेकिन अभी भी दो तत्वों के बीच एक अंतर है। मैं JSFiddle पर इस समस्या को दोहराना नहीं कर सकता, लेकिन यह मेरी वेबसाइट पर सभी ब्राउज़रों में होता है।

Answer 1

यह कैसे तत्वों inline-block के रूप में कार्य करता है।

आम तौर पर जब आप inline-block तत्वों का उपयोग करते हैं, तो आप अक्सर उन्हें अनुच्छेद के अंदर उपयोग करते हैं, इसलिए अक्षरों के बीच की जगह सुसंगत होनी चाहिए। inline-block तत्व भी इस नियम पर लागू होते हैं।

यदि आप पूरी तरह से स्थान को हटाना चाहते हैं, तो आप तत्वों को फ़्लोट कर सकते हैं।

float: left; 

आप अपने टेम्पलेट दस्तावेज़ से व्हाइटस्पेस को भी हटा सकते हैं। इस तरह:

<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" /> 

Answer 2

कि व्हाइटस्पेस आपके फ़ॉन्ट आकार के सापेक्ष है। तुम्हें पता है, इस मामले में एक फार्म अपने आदानों की कंटेनर पर font-size:0 जोड़कर इसे हटा सकते हैं, तो जैसे:

form { 
    font-size: 0; 
} 

Answer 3

जो स्थान आप देख रहे हैं वह डिफ़ॉल्ट पैडिंग इनलाइन तत्वों पर लागू होती है। सरल हैक? form पर font-size: 0 सेट करें, फिर इनपुट और बटन पर वास्तविक फ़ॉन्ट-आकार रीसेट करें।

जादू।

form { 
    font-size: 0; 
} 

form input { 
    font-size: 12px; 

ऐसा क्यों हो जाता है? ब्राउजर input एस के बीच एक स्पेस स्पेस के रूप में व्हाइटस्पेस का व्याख्या करता है, और तदनुसार प्रस्तुत करता है। आप अपने सभी तत्वों को एक पंक्ति पर भी एक साथ जोड़ सकते हैं, लेकिन यह बदसूरत कोड सूप है।

Answer 4

मैक पर क्रोम का उपयोग करना, मैं अंतरिक्ष से छुटकारा मिल सकता है अगर मैं डेवलपर टूल में HTML के रूप में रूप नोड संपादित करें, और इसलिए दो समापन टैग के बीच खाली स्थान हटाएं:

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"> 
     <input type="submit" value="Go!" class="btn"> 
     </form> 

हो जाता है:

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn"> 
     </form> 

Answer 5

एक तरह से अंतरिक्ष को दूर करने के लिए है, लेकिन अगर आप एक अपठनीय एक पंक्ति का झंझट के लिए तैयार नहीं कर रहे हैं, आप HTML टिप्पणी का उपयोग कर सकते हैं:

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><!-- 
    !--><input type="submit" value="Go!" class="btn"> 
</form>