दिलचस्प पोस्ट
प्रक्रिया को ऐसे पैरामीटर की उम्मीद है जो आपूर्ति नहीं की गई थी अजगर के साथ मैं एसक्यूएल पैरामीटर कैसे उपयोग करूं? संभव ट्यूपल्स की सूची में विभाजन सूची अजगर में दो दिन-वस्तु ऑब्जेक्ट्स के बीच मैं समय का अंतर कैसे प्राप्त करूं? जेडीबीसी कनेक्टर 5.1 का उपयोग करते हुए जावा से MySQL में UTF-8 डेटा पढ़ने / लिखने में समस्याएं एकाधिक फ़ंक्शन से कैसे बचें (func ())। * SQL क्वेरी में वाक्यविन्यास? base64 इनकोडेड छवियों ईमेल हस्ताक्षर में स्पिनर की चयनित आइटम प्रोग्रामेटिक रूप से सेट करें जावास्क्रिप्ट पोस्ट अनुरोध एक फार्म जमा की तरह Tools.jar को ढूँढने में असमर्थ हेरोको देवदार स्टैक पर वर्चुअलएन्व के साथ कैसे स्थापना रद्द करें? प्रमुख श्रोताओं की बजाए कुंजी बाइंडिंग का उपयोग कैसे करें क्या कितना JSON पकड़ सकता है पर एक सीमा है? कैसे newbs के लिए एपीआई दस्तावेज को पढ़ने के लिए? डेल्टा के साथ रुबी टाइम ऑब्जेक्ट पर विस्फोट

इनलाइन ब्लॉक तत्वों के बीच की जगह को कैसे निकालना है?

इस HTML और सीएसएस को देखते हुए:

परिणामस्वरूप, स्पैन तत्वों के बीच एक 4px विस्तृत स्थान होगा।
डेमो: http://jsfiddle.net/dGHFV/

मैं समझता हूं कि ऐसा क्यों होता है, और मुझे यह भी पता है कि मैं HTML स्रोत कोड में स्पैन तत्वों के बीच सफेद स्थान को निकालकर उस स्थान से छुटकारा पा सकता हूं, जैसे:

 <p> <span> Foo </span><span> Bar </span> </p> 

हालांकि, मैं एक सीएसएस समाधान की उम्मीद कर रहा था जिसके लिए HTML स्रोत कोड को छेड़छाड़ की आवश्यकता नहीं है।

मुझे पता है कि जावास्क्रिप्ट के साथ इसे कैसे हल करना है – कंटेनर तत्व (पैराग्राफ) से पाठ नोड्स निकालकर, ऐसा करें:

 // jQuery $('p').contents().filter(function() { return this.nodeType === 3; }).remove(); 

डेमो: http://jsfiddle.net/dGHFV/1/

लेकिन क्या इस मुद्दे को सीएसएस के साथ हल किया जा सकता है?

Solutions Collecting From Web of "इनलाइन ब्लॉक तत्वों के बीच की जगह को कैसे निकालना है?"

चूंकि यह उत्तर अधिक लोकप्रिय हो गया है, इसलिए मैं इसे महत्वपूर्ण रूप से पुनः लिख रहा हूं।

हम उस वास्तविक प्रश्न को नहीं भूलते जिसे पूछा गया था:

इनलाइन ब्लॉक तत्वों के बीच की जगह को कैसे निकालना है? मैं एक सीएसएस समाधान की उम्मीद कर रहा था जिसके लिए HTML स्रोत कोड को छेड़छाड़ की आवश्यकता नहीं है। क्या इस मुद्दे को सीएसएस के साथ हल किया जा सकता है?

अकेले सीएसएस के साथ इस समस्या को हल करना संभव है, लेकिन कोई पूरी तरह से मजबूत सीएसएस फिक्स नहीं हैं।

मेरे प्रारंभिक उत्तर में मेरे समाधान में font-size: 0 मूल तत्व को जोड़ना था, और उसके बाद बच्चों पर एक समझदार font-size घोषित करना था

http://jsfiddle.net/thirtydot/dGHFV/1361/

यह सभी आधुनिक ब्राउज़रों के हाल के संस्करणों में काम करता है यह IE8 में काम करता है यह सफारी 5 में काम नहीं करता है, लेकिन यह सफारी 6 में काम करता है। सफारी 5 लगभग एक मृत ब्राउज़र ( 0.33%, अगस्त 2015 ) है।

रिश्तेदार फ़ॉन्ट आकार के साथ संभावित मुद्दों में से अधिकांश तय करने के लिए जटिल नहीं हैं।

हालांकि, जब यह एक उचित समाधान है, अगर आपको विशेष रूप से केवल सीएसएस की ज़रूरत होती है, तो यह मेरी सलाह नहीं है कि आप अपने HTML को बदलने के लिए स्वतंत्र हैं (जैसा कि हम में से अधिकांश हैं)।


यह वही है जो मैं एक अनुभवी वेब डेवलपर के रूप में, वास्तव में इस समस्या को हल करने के लिए करता हूं:

 <p> <span>Foo</span><span>Bar</span> </p> 

हाँ य़ह सही हैं। मैं इनलाइन ब्लॉक तत्वों के बीच एचटीएमएल में हल्के स्थान को निकालता हूं।

यह आसान है। यह आसान है। यह हर जगह काम करता है यह व्यावहारिक समाधान है

आपको कभी-कभी सावधानी से विचार करना पड़ता है कि कहां से सफेद स्थान आएगा जावास्क्रिप्ट के साथ एक और तत्व जोड़ना होगा सफेद स्थान जोड़ना? नहीं, अगर आप इसे ठीक से नहीं करते हैं

चलिए कुछ नए एचटीएमएल के साथ, व्हाटस्पेस को हटाने के विभिन्न तरीकों की एक जादुई यात्रा पर चलें:

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 
  • आप ऐसा कर सकते हैं, जैसा मैं आमतौर पर करता हूं:

     <ul> <li>Item 1</li><li>Item 2</li><li>Item 3</li> </ul> 

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • या यह:

     <ul> <li>Item 1</li ><li>Item 2</li ><li>Item 3</li> </ul> 
  • या, टिप्पणियों का उपयोग करें:

     <ul> <li>Item 1</li><!-- --><li>Item 2</li><!-- --><li>Item 3</li> </ul> 
  • या, आप कुछ निश्चित टैग पूरी तरह से छोड़ भी सकते हैं (सभी ब्राउज़र इस के साथ ठीक हैं):

     <ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul> 

अब जब मैंने चले गए हैं और आप को "तीसरे स्थान से निकाले जाने वाले हजार अलग-अलग तरीकों से" मौत के लिए ऊब कर दिया है, तो उम्मीद है कि आप सभी को font-size: 0 बारे में भूल गए हैं font-size: 0


वैकल्पिक रूप से, अब आप कई लेआउट प्राप्त करने के लिए flexbox का उपयोग कर सकते हैं , जिनके लिए आप पहले इनलाइन-ब्लॉक का उपयोग कर सकते हैं: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS3 के अनुकूल ब्राउज़रों के लिए white-space-collapsing:discard

देखें: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

ठीक है, हालांकि मैंने font-size: 0; दोनों को ऊपर उठाया है font-size: 0; और कोशिश करने के बाद not implemented CSS3 feature उत्तर में not implemented CSS3 feature , मुझे पता चला कि इनमें से कोई भी एक वास्तविक समाधान नहीं है

दरअसल, मजबूत साइड इफेक्ट्स के बिना भी एक कामकाज नहीं है।

फिर मैंने अपने HTML स्रोत ( JSP ) से inline-block डिविज़ के बीच रिक्त स्थान (यह जवाब इस तर्क के बारे में है) को हटाने का निर्णय लिया , इसे बदलकर:

 <div class="inlineBlock"> I'm an inline-block div </div> <div class="inlineBlock"> I'm an inline-block div </div> 

इसके लिए

 <div class="inlineBlock"> I'm an inline-block div </div><div class="inlineBlock"> I'm an inline-block div </div> 

यह बदसूरत है, लेकिन काम कर रहा है

लेकिन, एक मिनट रुको … क्या होगा अगर मैं अपने Taglibs loops को Taglibs loops ( JSTL , JSTL , इत्यादि) के अंदर उत्पन्न कर रहा हूं …?

उदाहरण के लिए:

 <s:iterator begin="0" end="6" status="ctrDay"> <br/> <s:iterator begin="0" end="23" status="ctrHour"> <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"> <div class="inlineBlock> I'm an inline-block div in a matrix (Do something here with the pushed object...) </div> </s:push> </s:iterator> </s:iterator> 

यह सब चीजों को इनलाइन करने के लिए बिल्कुल विचारणीय नहीं है, इसका मतलब होगा

 <s:iterator begin="0" end="6" status="ctrDay"> <br/> <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock> I'm an inline-block div in a matrix (Do something here with the pushed object...) </div></s:push></s:iterator> </s:iterator> 

यह पठनीय नहीं है, मुश्किल है और समझने के लिए, आदि …

मैंने पाया समाधान:

अगले एक की शुरुआत के लिए एक div के अंत कनेक्ट करने के लिए HTML टिप्पणियों का उपयोग करें!

 <s:iterator begin="0" end="6" status="ctrDay"> <br/> <s:iterator begin="0" end="23" status="ctrHour"><!-- --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!-- --><div class="inlineBlock> I'm an inline-block div in a matrix (Do something here with the pushed object...) </div><!-- --></s:push><!-- --></s:iterator> </s:iterator> 

इस तरह आपके पास एक पठनीय और सही तरीके से इंडेंट कोड होगा।

और, एक सकारात्मक पक्ष प्रभाव के रूप में, HTML source , हालांकि रिक्त टिप्पणियों से प्रभावित हुए हैं, परिणामस्वरूप ठीक से इंडेंट किया जाएगा;

चलो पहले उदाहरण लेते हैं, इम्हो:

  <div class="inlineBlock"> I'm an inline-block div </div><!-- --><div class="inlineBlock"> I'm an inline-block div </div> 

इस से बेहतर है

  <div class="inlineBlock"> I'm an inline-block div </div><div class="inlineBlock"> I'm an inline-block div </div> 

उम्मीद है की वो मदद करदे…

तत्वों के बीच एक सफेद स्थान नहीं होने के लिए टिप्पणियां जोड़ें। मेरे लिए फ़ॉन्ट आकार को शून्य से रीसेट करने और फिर उसे वापस सेट करना आसान है

 <div> Element 1 </div><!-- --><div> Element 2 </div> 

यह वही उत्तर है जो मैंने संबंधित पर दिया था: प्रदर्शन: इनलाइन ब्लॉक – उस जगह क्या है?

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

 @font-face{ font-family: 'NoSpace'; src: url('../Fonts/zerowidthspaces.eot'); src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'), url('../Fonts/zerowidthspaces.woff') format('woff'), url('../Fonts/zerowidthspaces.ttf') format('truetype'), url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg'); } body { font-face: 'OpenSans', sans-serif; } .inline-container { font-face: 'NoSpace'; } .inline-container > * { display: inline-block; font-face: 'OpenSans', sans-serif; } 

स्वाद के लिए सूट यहाँ फ़ॉन्ट के लिए एक डाउनलोड है जो मैंने फोंट-फोर्ज में पकाया है और फोंटसवीरेल वेबफॉन्ट जनरेटर के साथ परिवर्तित किया है। मुझे 5 मिनट के सभी ले लिया सीएसएस @font-face घोषणा शामिल है: शून्य-चौड़ा स्थान फ़ॉन्ट ज़िपित । यह Google ड्राइव में है, इसलिए आपको अपने कंप्यूटर पर इसे सहेजने के लिए फ़ाइल> डाउनलोड पर क्लिक करना होगा। यदि आपको अपनी मुख्य सीएसएस फ़ाइल में घोषणा की प्रतिलिपि बनाते हैं, तो आपको संभवतः फ़ॉन्ट पथ को भी बदलना होगा।

display:inline-block लिए सभी स्थान उन्मूलन तकनीकों display:inline-block खराब हैंक्स …

फ़्लेक्सबॉक्स का उपयोग करें

यह बढ़िया है, इन सभी इनलाइन ब्लॉक लेआउट बीएस को हल करता है, और 2017 के रूप में 98% ब्राउज़र समर्थन है (अधिक अगर आप पुराने आईई के बारे में परवाह नहीं करते हैं)

  • क्या हम फ्लेक्सबॉक्स का उपयोग करने के लिए तैयार हैं?
  • सीएसएस लचीला बक्से का उपयोग करना – वेब डेवलपर मार्गदर्शिका | MDN
  • फ्लेक्सबॉक्स के लिए एक पूर्ण गाइड | सीएसएस-ट्रिक्स
  • फ्लेक्सी बॉक्सेस – सीएसएस फ्लेक्सबॉक्स खेल का मैदान और कोड पीढ़ी उपकरण

सीएसएस टेक्स्ट मॉड्यूल स्तर 3 पर आधारित दो और विकल्प ( white-space-collapsing:discard बजाय white-space-collapsing:discard जो स्पेक ड्राफ्ट से हटा दिया गया है):

  • word-spacing: -100%;

सिद्धांत रूप में, ठीक उसी प्रकार किया जाना चाहिए – जरूरी है कि 'शब्दों' के बीच अंतरिक्ष के 100% अंतरिक्ष वर्ण की चौड़ाई, शून्य से शून्य के बीच सफेद स्थान को छोटा करें। लेकिन कहीं भी, दुर्भाग्य से काम नहीं करने लगता है, और यह सुविधा 'जोखिम में' चिह्नित है (यह कल्पना से भी हटा दिया जा सकता है)।

  • word-spacing: -1ch;

अंक '0' की चौड़ाई से इंटर-शब्द रिक्त स्थान को छोटा करता है मोनोस्पेस फ़ॉन्ट में यह अंतरिक्ष चरित्र की चौड़ाई के बराबर होना चाहिए (और किसी भी अन्य पात्र के रूप में भी) यह Firefox 10+, क्रोम 27+ में काम करता है, और लगभग IE9 + में काम करता है

बेला

दुर्भाग्य से, यह 2015 है और white-space-collapse अभी भी कार्यान्वित नहीं हुआ है।

इस बीच, मूल तत्व font-size: 0; और बच्चों पर font-size निर्धारित करें यह काम कर जाना चाहिए

पुराने ब्रॉउज़ के लिए फ्लेक्सबॉक्स का उपयोग क्यों न करें और ऊपर की ओर से सुझाव (ऊपर सुझाव से) करें

 ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 

display: flex; जोड़ें display: flex; मूल तत्व के लिए यहां प्रीफ़िक्स के साथ यूओईयन है

 p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } span { float: left; display: inline-block; width: 100px; background: blue; font-size: 30px; color: white; text-align: center; } 
 <p> <span> Foo </span> <span> Bar </span> </p> 

font-size: 0; प्रबंधित करने के लिए एक बिट पेचीदा हो सकता है …

मुझे लगता है कि निम्न द्वि-लाइन बहुत बेहतर और अधिक पुन: उपयोग करने योग्य हैं, और किसी भी अन्य तरीकों से समय-सेवर मैं व्यक्तिगत रूप से इसका उपयोग करता हूं:

 .inline-block-wrapper>.inline-block-wrapper, .inline-block-wrapper{letter-spacing: -4px;} .inline-block-wrapper>*{letter-spacing: 0;display: inline-block;} /* OR better shorter name...*/ .items>.items, .items{letter-spacing: -4px;} .items>*{letter-spacing: 0;display: inline-block;} 

तो आप इसे निम्न के रूप में उपयोग कर सकते हैं …

 <ul class="items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 

जहां तक ​​मुझे पता है (मैं गलत हो सकता है), लेकिन सभी ब्राउज़र इस विधि का समर्थन करते हैं।

स्पष्टीकरण :

यह काम करता है (हो सकता है -3 पिक्सेल बेहतर हो सकता है) ठीक उसी तरह जैसा कि आप इसे काम करने की आशा करेंगे

  • आप कोड कॉपी और पेस्ट करें (एक बार)
  • तो अपने एचटीएमएल पर बस प्रत्येक इनलाइन ब्लॉक के अभिभावक पर class="items" उपयोग करें

आपको अपने नए इनलाइन ब्लॉक के लिए सीएसएस पर वापस जाने और एक और सीएसएस नियम जोड़ने की ज़रूरत नहीं होगी।

एक बार में दो मुद्दों को सुलझाना

यह भी ध्यान दें > (संकेत से अधिक) इसका अर्थ है कि * / सभी बच्चों को इनलाइन-ब्लॉक होना चाहिए।

http://jsfiddle.net/fD5u3/

नोट: मैंने एक आवरण का एक बच्चा आवरण रखा है, जब अक्षर-रिक्ति प्राप्त करने के लिए समायोजित करने के लिए संशोधित किया है।

सरल:

 item { display: inline-block; margin-right: -0.25em; } 

माता पिता तत्व को छूने की कोई ज़रूरत नहीं है

केवल यहाँ शर्त: आइटम का फ़ॉन्ट-आकार परिभाषित नहीं होना चाहिए (माता-पिता के फ़ॉन्ट-आकार के बराबर होना चाहिए)।

0.25em डिफ़ॉल्ट word-spacing

w3schools – शब्द-रिक्ति संपत्ति

आप फ्लेक्सबॉक्स को आज़मा सकते हैं और नीचे दिए गए कोड को लागू कर सकते हैं और स्थान हटा दिया जाएगा।

 p { display: flex; flex-direction: row; } 

आप इसके बारे में इस लिंक पर अधिक जान सकते हैं: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

मुझे अभी और font-size:0; से इस समस्या थी font-size:0; मैंने पाया है कि IE7 में समस्या बनी हुई है क्योंकि IE सोचता है "फ़ॉन्ट आकार 0?!?! WTF क्या आप पागल आदमी हैं?" – तो, ​​मेरे मामले में मैंने एरिक मेयेर के सीएसएस रीसेट और font-size:0.01em; मेरे IE7 से FF9 तक 1px का अंतर है, इसलिए मुझे लगता है कि यह एक समाधान हो सकता है

आम तौर पर हम इस तरह के तत्वों को अलग-अलग लाइनों में इस्तेमाल करते हैं लेकिन display:inline-block मामले में display:inline-block एक ही पंक्ति में टैग का उपयोग करके display:inline-block को स्थान हटा दिया जाएगा लेकिन अलग-अलग लाइन में नहीं होगा

अलग लाइन में टैग के साथ उदाहरण

 p span { display: inline-block; background: red; } 
 <p> <span> Foo </span> <span> Bar </span> </p> 

मुझे पूरा यकीन नहीं है कि यदि आप एक अंतर के बिना दो नीला कलर बनाना चाहते हैं या अन्य को सफेद स्थान पर रखना चाहते हैं, लेकिन यदि आप अंतर को दूर करना चाहते हैं,

 span { display:inline-block; width:100px; background:blue; font-size:30px; color:white; text-align:center; float:left; } 

और हो गया।
आशा है कि यह आपको मदद करता है

मैं इसे हाल ही में और इसके बजाय माता font-size:0 पिता font-size:0 सेट करने की कोशिश कर रहा हूं font-size:0 फिर बच्चे को उचित मूल्य पर सेट करना, मैं पेरेंट कंटेनर letter-spacing:-.25em सेट करके लगातार परिणाम प्राप्त कर रहा हूं letter-spacing:-.25em तो बच्चा वापस letter-spacing:normal

एक वैकल्पिक धागा में मैंने एक टिप्पणीकार को बताया कि font-size:0 हमेशा आदर्श नहीं है क्योंकि लोग अपने ब्राउज़र में न्यूनतम फ़ॉन्ट आकार नियंत्रित कर सकते हैं, फ़ॉन्ट आकार को शून्य पर सेट करने की पूरी संभावना को नकारते हुए।

ईएमएस का उपयोग करना चाहे जो कि फ़ॉन्ट-आकार निर्दिष्ट 100%, 15pt या 36px है, इसके बावजूद काम करने के लिए प्रतीत होता है।

http://cdpn.io/dKIjo

 p { display: flex; } span { float: left; display: inline-block; width: 100px; background: red; font-size: 30px; color: white; } 
 <p> <span> hello </span> <span> world </span> </p> 

मैं यूज़र 560 9 8 9 2 9 के जवाब को थोड़ा विस्तारित करने जा रहा हूं क्योंकि मेरा मानना ​​है कि यहां अन्य समाधान बहुत जटिल हैं / बहुत ज्यादा काम है एक margin-right: -4px आवेदन करना margin-right: -4px इनलाइन ब्लॉक तत्वों के लिए margin-right: -4px रिक्ति को निकाल देगा और सभी ब्राउज़रों द्वारा समर्थित है। अपडेट किया हुआ बेला यहाँ देखें नकारात्मक मार्जिन का उपयोग करने से संबंधित उन लोगों के लिए, इसे पढ़ने का प्रयास करें

मुझे लगता है कि इसके लिए एक बहुत ही सरल / पुरानी विधि है जो सभी ब्राउज़रों द्वारा भी समर्थित है I 6/7 हम माता-पिता में बड़े नकारात्मक मूल्य के लिए letter-spacing बस सेट कर सकते हैं और फिर इसे बाल तत्वों पर normal में वापस सेट कर सकते हैं:

 body {font-size: 24px} .container.no-spacing { letter-spacing: -1em; /* => could be a large negative value */ } .item { padding: 2px; border: 1px solid #b0b0c0; /* show edges */ letter-spacing: normal; /* => back to normal letter-spacing */ } 
 <p style="color:red">Wrong (default spacing):</p> <div class="container"> <span class="item">Item-1</span> <span class="item">Item-2</span> <span class="item">Item-3</span> </div> <hr/> <p style="color:green">Correct (no-spacing):</p> <div class="container no-spacing"> <span class="item">Item-1</span> <span class="item">Item-2</span> <span class="item">Item-3</span> </div> 

Php कोष्ठक के साथ

 ul li { display: inline-block; } 
  <ul> <li> <div>first</div> </li><? ?><li> <div>first</div> </li><? ?><li> <div>first</div> </li> </ul> 
 <ul class="items"> <li>Item 1</li><?php ?><li>Item 2</li><?php ?><li>Item 3</li> </ul> 

बस इतना ही। सादृश्य द्वारा अन्य लैंग में

मुझे एक शुद्ध सीएसएस समाधान मिला जो मेरे लिए सभी ब्राउज़रों में बहुत अच्छा काम करता था:

 span { display: table-cell; } 

white-space: nowrap जोड़ें white-space: nowrap अब कंटेनर तत्व पर white-space: nowrap ;

  css : * { box-sizing: border-box; } .row { vertical-align: top; white-space: nowrap; } .column{ float:left ; display:inline-block ; width:50% // or whatever in your case } 

एचटीएमएल:

 <div class="row"> <div class="column"> Some stuff</div> <div class="column">Some other stuff</div> </div> 

यहां प्लंकर है

इनलाइन ब्लॉक तत्वों से रिक्त स्थान निकालें कई तरीके हैं:

  1. नकारात्मक मार्जिन

    div एक {प्रदर्शन: इनलाइन – ब्लॉक; मार्जिन – सही: -4 पिक्सेल; }

  2. फ़ॉन्ट आकार शून्य से

    nav {font – आकार: 0; } nav एक {font-size: 16 px; }

  3. समापन टैग छोड़ें

    <ul> <li> एक <li> दो <li> तीन </ ul>

सीएसएस टेक्स्ट मॉड्यूल स्तर 4 विनिर्देश एक text-space-collapse संपत्ति को परिभाषित करता है , जो एक तत्व के अंदर और चारों तरफ सफेद स्थान को संसाधित करने की अनुमति देता है।

तो, आपके उदाहरण के बारे में, आपको यह लिखना होगा:

 p { text-space-collapse: discard; } 

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

मुझे मिले एक और तरीका मार्जिन-बाएं को ऋणात्मक तत्व के रूप में लागू करना है, जबकि पंक्ति के पहले तत्व को छोड़कर

 span { display:inline-block; width:100px; background:blue; font-size:30px; color:white; text-align:center; margin-left:-5px; } span:first-child{ margin:0px; } 

उदाहरण के लिए सीएसएस में एक आसान उपाय है:

एचटीएमएल

 <p class="parent"> <span class="children"> Foo </span> <span class="children"> Bar </span> </p> 

सीएसएस

 .parent { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; } .children { display: inline-block; *display: inline; zoom:1; letter-spacing: normal; word-spacing: normal; } 

मेरे मसौदे में फ़ॉन्ट आकार लिखें: 0 जब आप प्रोजेक्ट में उन जैसे उपयोग करते हैं तो सुरक्षित नहीं होता है इसलिए मैं शुद्ध सीएसएस समाधान पसंद करता हूं। आप इस कड़ी purecss का आनंद इस लिंक में देख सकते हैं 🙂

 .row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background:#f9f9f9; padding:1em .5em; } .col { display: inline-block; *display: inline; zoom:1;letter-spacing: normal; word-spacing: normal; /* For better view */ padding:16px; background:#dbdbdb; border: 3px #bdbdbd solid; box-sizing:border-box; width:25%; } 
  <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div> 

मैंने एक फ़्री कोड कैंप प्रोजेक्ट के लिए रिजैक्ट जे एस और एसएएसएस में इसी प्रकार की समस्या का फ़ंट साइज: 0 का समाधान करने की कोशिश की है। मैं वर्तमान में काम कर रहा हूं।

और यह काम करता है!

सबसे पहले, स्क्रिप्ट:

 var ActionBox = React.createClass({ render: function() { return( <div id="actionBox"> </div> ); }, }); var ApplicationGrid = React.createClass({ render: function() { var row = []; for(var j=0; j<30; j++){ for(var i=0; i<30; i++){ row.push(<ActionBox />); } } return( <div id="applicationGrid"> {row} </div> ); }, }); var ButtonsAndGrid = React.createClass({ render: function() { return( <div> <div id="buttonsDiv"> </div> <ApplicationGrid /> </div> ); }, }); var MyApp = React.createClass({ render: function() { return( <div id="mainDiv"> <h1> Game of Life! </h1> <ButtonsAndGrid /> </div> ); }, }); ReactDOM.render( <MyApp />, document.getElementById('GoL') ); 

Then, the SASS:

 html, body height: 100% body height: 100% margin: 0 padding: 0 #mainDiv width: 80% height: 60% margin: auto padding-top: 5px padding-bottom: 5px background-color: DeepSkyBlue text-align: center border: 2px solid #381F0B border-radius: 4px margin-top: 20px #buttonsDiv width: 80% height: 60% margin: auto margin-bottom: 0px padding-top: 5px padding-bottom: 0px background-color: grey text-align: center border: 2px solid #381F0B border-radius: 4px margin-top: 20px #applicationGrid width: 65% height: 50% padding-top: 0px margin: auto font-size: 0 margin-top: 0px padding-bottom: 5px background-color: white text-align: center border: 2px solid #381F0B border-radius: 4px margin-top: 20px #actionBox width: 20px height: 20PX padding-top: 0px display: inline-block margin-top: 0px padding-bottom: 0px background-color: lightgrey text-align: center border: 2px solid grey margin-bottom: 0px 

Every question, that try to remove the space between inline-block s seems like a <table> to me…

Try something like this:

 p { display: table; } span { width: 100px; border: 1px solid silver; /* added for visualization only*/ display: table-cell; } 
 <p> <span> Foo </span> <span> Bar </span> </p>