div

Question

युक्त 2 क्षैतिज divs के बीच की जगह को खत्म नहीं कर सकता है, आसान होना चाहिए, है ना? बस बाहरी को div के पैडिंग को शून्य पर सेट करें, और बाहरी div के अंदर दोनों पक्ष-दर-पक्ष divs को मार्जिन रखने के लिए सेट करें: 0 लेकिन 2 क्षैतिज divs के बीच की जगह पर इसका कोई प्रभाव नहीं पड़ता है। मुझे जो चाहिए वह हरे-रूपरेखा वाले दाहिने तरफ div को छूने के लिए लाल-रूपरेखा बाएं div है।

पैडिंग और मार्जिन का उपयोग करने के मेरे प्रयास के बावजूद, 2 divs के बीच की जगह दूर नहीं जाएगी।

मैं इतने पर कई सवालों के जवाब पर ध्यान दिया है, लेकिन अभी तक कोई भी के टूटे हुए यह इस सरल उदाहरण के लिए नीचे - मेरी बेला इस मुद्दे पता चलता है,

http://jsfiddle.net/Shomer/tLZrm/7/

और यहाँ बहुत ही सरल कोड है पर:

<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%"> 

    <div style="display:inline-block; width:45%; overflow:hidden; margin:0; border: 1px solid red"> Flimmy-flammy 
    </div> 

    <div style="display:inline-block; width:50%; overflow:hidden; margin:0px; border: 1px solid green"> Hambone-Sammy 
    </div> 

</div> 

Answer 1

इस प्रयास करें:

<div style="border: 4px solid blue; margin:0; padding:0; width:80%; height: 50px;"> 

    <div style="float:left; display:inline-block; width:45%; overflow:hidden; border: 1px solid red;"> Flimmy-flammy 
    </div> 

    <div style="float: left; display:inline-block; width:50%; overflow:hidden; border: 1px solid green;"> Hambone-Sammy 
    </div> 

</div> 

Answer 2

float संपत्ति का उपयोग करें।

div { float: left; }: http://jsfiddle.net/tLZrm/10/ के साथ उदाहरण।

Answer 3

अंतरिक्ष अपने divs के बीच गाया खाली स्थान के, (डॉट्स के रूप में प्रतिनिधित्व) ध्वस्त हो गई, में है:

</div>. 
................. 
....<div> 

इसके बजाय, इस तरह कोडिंग का प्रयास करें:

</div><div> 

और अंतर गायब हो जाएगा।

Answer 4

इनलाइन ब्लॉक के बीच स्रोत में व्हाइटस्पेस लेआउट में एक अंतर की ओर जाता है। अंतरिक्ष को हटाकर (चाहे वह एक ही स्थान हो या कुछ लाइन ब्रेक कोई फर्क नहीं पड़ता) तत्व इरादे के रूप में स्पर्श करेंगे।

कोड की स्वरूपण को थोड़ी सी कीमत पर रखा जा सकता है, या तो व्हाइटस्पेस पर टिप्पणी करके या व्हाइट्स स्पेस टैग के भीतर होकर।

का उपयोग करते हुए टिप्पणियां:

<div> 
    <div>Content</div><!-- 
    --><div>Content</div> 
</div> 

टैग के अंदर रखने LINEBREAK:

<div> 
    <div>Content</div 
    ><div>Content</div> 
</div> 

Answer 5

तरह @Juan Lanus ने कहा कि उनकी इस सवाल का जवाब में, यह खाली स्थान के आपकी समस्या का कारण है।

एक अतिरिक्त समाधान font-size: 0px को युक्त div पर सेट करना है।

लेकिन आपको बच्चों के div पर font-size: initial (या गैर-शून्य मान) भी सेट करने की आवश्यकता होगी ताकि आप अभी भी अपना टेक्स्ट देख सकें।