मैं इनलाइन ब्लॉक द्वारा उत्पन्न अतिरिक्त मार्जिन स्थान को कैसे हटा सकता हूं?

Question

मैं दो कॉलम प्रारूपित करने के लिए इस सीएसएस का उपयोग कर रहा हूं लेकिन मुझे अभी भी दो के बीच मार्जिन स्पेस मिल रहा है। मैं margin-left: -4px; या कुछ ऐसे उपयोग के साथ इसे खत्म कर सकता हूं। क्या ऐसा करने का कोई और शानदार तरीका है या सीएसएस कोड में कुछ गड़बड़ है?

div.col1{ 
    display: inline-block; 
    min-height: 900px; 
    height: 100%; 
    width 300px; 
    margin: 0px; 
    background-color: #272727; 
    overflow: hidden; 
    border: 1px dotted red; 
} 

div.col2{ 
    display: inline-block; 
    min-height: 900px; 
    height: 100%; 

    width: 620px; 
    margin: 0px; 

    vertical-align: top; 
    border: 1px dotted red; 
    overflow: hidden; 
} 

Answer 1

शायद तुम हो:

<div class="col1"> 
    Stuff 1 
</div> 
<div class="col2"> 
    Stuff 2 
</div> 

? यदि ऐसा है तो यह शायद एक सफेद जगह की समस्या है (यह एचटीएमएल में व्हाइटस्पेस मायने रखता है)। इसे ठीक करना चाहिए:

<div class="col1"> 
    Stuff 1 
</div><div class="col2"> 
    Stuff 2 
</div> 

Answer 2

आप यह भी निर्दिष्ट करना चाहिए:

padding: 0; 

Answer 3

फ्लोट लागू करें: बाएं और इससे अंतरिक्ष को हटा दिया जाएगा ताकि टेक्स्ट को 1 लाइन पर नहीं होना चाहिए।

Answer 4

वैकल्पिक रूप से, अपने स्रोत कोड के स्वरूपण को बदले बिना इसे ठीक करने के लिए, आप एक अतिरिक्त तत्व बना सकते हैं।

यदि आप किसी सूची में इस कर रहे थे यह दिखाई देगा:

<ul > 
    <li> 
     <a href="#">Solutions Overview</a> 
    </li>  
</ul> 


<style type="text/css">    
    ul {word-spacing:-1em;} 
    ul li a{word-spacing:0;} 
</style> 

Answer 5

साथ ही, कुछ उपयोगी तकनीकों पाया यहाँ सूचीबद्ध किया जा सकता है:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 6

विशेषता inline-block होगा साथ तत्वों व्यवहार करें जैसे कि वे इनलाइन हैं (इसलिए नाम), और इसलिए किसी भी सफेद जगह का सामना अंतरिक्ष के रूप में किया जाएगा। उदाहरण के लिए:

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

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

See a live example here

लिए अलग तरह से रेंडर किया जाएगा इस प्रकार आप इस समस्या HTML का उपयोग कर हल कर सकते हैं:

या तो पर अपने सभी तत्वों को जगह एक ही पंक्ति, यानी

<div> 
    // CONTENT 
</div><div> 
    // CONTENT 
</div><div> 
    // CONTENT 
</div> 

रिक्त स्थान

<div> 
    //CONTENT 
</div><!-- 
--><div> 
    //CONTENT 
</div> 

आप इस समस्या सीएसएस का उपयोग कर के रूप में इस का समाधान कर सकते दूर करने के लिए

या उपयोग एचटीएमएल टिप्पणियाँ:

माता पिता पर विशेषता font-size: 0 सेट करें, यानी

parent { 
    display: inline-block; 
    font-size: 0 
} 
parent * { 
    font-size: 12px 
} 

या माता-पिता पर zoom: 1 विशेषता सेट करें, यानी

parent { 
    display: inline-block; 
    zoom: 1 
} 

Answer 7

एक साधारण font-size:0 पेरेंट तत्व के लिए काम करेंगे।

Answer 8

मूल तत्व बनाना font-size: 0 समस्या को हल करेगा।

<div class="col-set"> 
    <div class="col1"> 
     Stuff 1 
    </div> 
    <div class="col2"> 
     Stuff 2 
    </div> 
</div> 

.col-set { font-size: 0; }  
.col-set > div { font-size: 12px; }