मैं इनलाइन / इनलाइन-ब्लॉक तत्वों के बीच का स्थान कैसे निकालूं?

1066

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

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

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

स्निपेट का विस्तार करें

परिणामस्वरूप, SPAN तत्वों के बीच एक 4 पिक्सेल चौड़ा स्थान होगा।

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

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

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

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

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

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

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

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

html css

— Š समय विद्या
स्रोत

प्रासंगिक विकल्पों के एक पूरे सेट के लिए इस सवाल में मेरा जवाब देखें: stackoverflow.com/questions/14630061/…

— ktamlyn

अतिरिक्त संदर्भ: 1. davidwalsh.name/remove-whitespace-inline-block 2. css-tricks.com/fighting-the-space-between-inline-block-elements

— romelmederos

सम्बंधित: stackoverflow.com/a/59357436/104380

— vsync

1006

चूंकि यह उत्तर लोकप्रिय हो गया है, इसलिए मैं इसे फिर से लिख रहा हूं।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

या, यदि आप PHP या इसी तरह का उपयोग कर रहे हैं:
```
<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>
```

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

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

— thirtydot
स्रोत

7

यह FF3.6, IE9RC, O11, Ch9 में काम करता है। हालाँकि, सफारी 5 में अभी भी 1px चौड़ी खाई बनी हुई है:(

— asime Vidas

7

@thirtydot क्या आप इस उत्तर की टिप्पणी देख सकते हैं । यह हो सकता है कि यह font-size:0चाल इतना अच्छा विचार नहीं है ...

— asime Vidas

25

मुझे पता है कि पोस्टर एक सीएसएस समाधान की तलाश में है, लेकिन यह समाधान - जो अब तक सबसे अधिक मतदान किया गया है (30 वोट बनाम 5 जैसा कि मैं यह लिखता हूं) - इसके मजबूत दुष्प्रभाव हैं और यह क्रॉस ब्राउज़र पर भी काम नहीं करता है। इस बिंदु पर यह आपके HTML में समस्याग्रस्त व्हाट्सएप को हटाने के लिए अधिक व्यावहारिक है।

— स्टीफ थिरियन

10

इस समाधान तभी काम करता है आप अपने कंटेनर आकार के लिए ईएमएस के साथ काम न

— Meo

6

यह सापेक्ष फ़ॉन्ट-आकार वाले बाल तत्वों को तोड़ता है।

— डैनियल

156

CSS3 के अनुरूप ब्राउज़र के लिए वहाँ है white-space-collapsing:discard

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

— HBP
स्रोत

क्या आप trim-innerइसके बजाय उपयोग नहीं करना चाहेंगे discard?

— spb

49

यह पाठ स्तर 3 से हटा दिया गया था, लेकिन पाठ स्तर 4 में है । यह 2016 पहले से ही है और अभी भी कोई समर्थन नहीं है। text-space-collapse:discard

— ओरोल

1

@ मित्र: अन्य समाधान सभी मामलों में काम नहीं करते हैं। उदाहरण के लिए, मैं किसी भी समाधान के बारे में नहीं जानता हूं, जो कि पीछे की जगह को हटा देगा <p>A long text...</p>, जहां पाठ सामग्री की तुलना में अलग-अलग पंक्तियों पर उद्घाटन और समापन टैग हैं। यह कुछ ऐसा है जो मैं अपनी HTML फ़ाइलों को चुस्त और पठनीय रखने के लिए हर समय करता हूं।

— राबर्ट कुज़्निअर

@ रोबर्टfloat

— मिस्टर लिस्टर

@ मस्टरिस्टर फ्लोटिंग वास्तव में अनुगामी स्थान को हटा देता है, लेकिन इसके गंभीर दुष्परिणाम हैं - कंटेनर के लेआउट में तत्व की स्थिति को पूरी तरह से बदल देता है। मैं ऐसा कैसे कर सकता हूं, जब एक तत्व तैरता है मेरे लेआउट को नष्ट कर देता है (जो आमतौर पर मामला है)?

— रॉबर्ट कुज़्नियर

94

संपादित करें:

आज, हमें बस Flexbox का उपयोग करना चाहिए ।

पुराने उत्तर:

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

वास्तव में, मजबूत दुष्प्रभावों के बिना एक भी समाधान नहीं है।

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

<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>

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

लेकिन, एक मिनट प्रतीक्षा करें ... क्या हुआ अगर मैं अंदर मेरे divs पैदा कर रहा हूँ Taglibs loops( Struts2, 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>

— एंड्रिया लिगियोस
स्रोत

1

ध्यान दें कि यह आपके संपादक में कोड तह कार्यक्षमता को भी तोड़ सकता है।

— jknotek

44

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

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

— राडेक
स्रोत

यह एक हैक है जिसे हमें 2020 में उपयोग नहीं करना चाहिए: caniuse.com/#feat=flexbox

— tonygatta

उत्तर 2013 में लिखा गया था। जबकि फ्लेक्सबॉक्स इस सवाल का जवाब नहीं है, लेकिन यह भी काम नहीं कर रहा है: stackoverflow.com/a/37512227/1019850

— डेविड

42

के लिए सभी अंतरिक्ष उन्मूलन तकनीक display:inline-blockबुरा हैक कर रहे हैं ...

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

यह कमाल है, यह इनलाइन-ब्लॉक लेआउट bs को हल करता है, और 2017 के रूप में 98% ब्राउज़र समर्थन है (यदि आप पुराने IEs के बारे में परवाह नहीं करते हैं)।

— Yarin
स्रोत

1

गंदा हैक हो सकता है, लेकिन फ़ॉन्ट-आकार: 0 ब्राउज़र के 100% पर काम करता है, और प्रदर्शन को लागू करता है: इनलाइन-फ्लेक्स अभी भी अतिरिक्त व्हाट्सएप से छुटकारा नहीं पाता है, यहां तक कि उस ब्राउज़र पर भी जो इसका समर्थन नहीं करता है!

— पैट्रिक

@patrick Flexbox निश्चित रूप से समस्या को हल करता है, आप बस इसे गलत कर रहे हैं। इनलाइन-फ्लेक्स, इनलाइन आइटमों को प्रदर्शित करने के लिए नहीं है - यह केवल कंटेनरों पर लागू होता है। देखें stackoverflow.com/a/27459133/165673

— यारिन

7

"फ़ॉन्ट-आकार: 0" 100% ब्राउज़रों पर काम नहीं करता है। (न्यूनतम फ़ॉन्ट आकार ब्राउज़र सेटिंग्स)। और यह उत्तर वास्तव में अच्छा है।

— विलीसुएल

35

display: flex;मूल तत्व में जोड़ें । यहाँ एक उपसर्ग के साथ समाधान है:

सरलीकृत संस्करण 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

स्निपेट का विस्तार करें

उपसर्ग 👇 के साथ ठीक करें

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>

स्निपेट का विस्तार करें

— मो
स्रोत

1

यह एक महान जवाब है! हालांकि, मुझे लगता है कि सरलीकृत संस्करण को शीर्ष पर रखना साफ-सुथरा होगा, इसलिए यह पहली चीज है जिसे एक पाठक देखता है। या शायद गैर-सरलीकृत संस्करण को भी हटा दें।

— स्टीफनोट

1

@Stefnotch किया गया ✅ आपके बहुमूल्य सुझाव के लिए धन्यवाद :-)

— मो।

31

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

इनलाइन-ब्लॉक से व्हाट्सएप को हटाने का वास्तव में एक बहुत ही सरल तरीका है जो आसान और अर्थ दोनों है। इसे शून्य-चौड़ाई वाले रिक्त स्थान के साथ एक कस्टम फ़ॉन्ट कहा जाता है, जो आपको बहुत छोटे फ़ॉन्ट का उपयोग करके फ़ॉन्ट स्तर पर इनलाइन तत्वों के लिए व्हाट्सएप (इनलाइन तत्वों के लिए ब्राउज़र द्वारा जोड़ा गया) को संक्षिप्त करने की अनुमति देता है। एक बार जब आप फ़ॉन्ट की घोषणा करते हैं, तो आप बस 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;
}

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

— जेपीसी
स्रोत

1

मैंने देखा कि आप इसे सीएसएस ट्रिक्स में पोस्ट करते हैं जो मुझे लगता है, और मेरे लिए यह एक महान जवाब है। यह हल्का है, इसे लागू करना आसान है और क्रॉस-ब्राउज़र (जहां तक मेरे परीक्षणों ने दिखाया है)। मैं पूरी तरह से फ्लेक्सबॉक्स के साथ जा रहा था जब तक मुझे एहसास नहीं हुआ कि फ़ायरफ़ॉक्स flex-wrapकम से कम v28 ( srsly? ) तक समर्थन नहीं करेगा , लेकिन यह तब तक एक आदर्श गिरावट है।

— २१

16

यह एक लंबे समय में देखा गया ओवरकिल का सबसे खराब मामला है। किसी स्थान को निकालने के लिए संपूर्ण फ़ॉन्ट डाउनलोड करें? गीज़।

— श्री लिस्टर

3

@Mrister आप महसूस करते हैं कि ऐसी फॉन्ट फाइल छोटी है? यह किसी भी ग्लिफ़ को अंदर नहीं ले जाता है। मैं इसके बजाय बेस 64 एनकोडेड को शामिल करने का तर्क दूंगा ताकि हम अनुरोध से भी छुटकारा पा सकें।

— रॉबर्ट कोरिटनिक

यह आइकन फोंट के समान घातक दोष है, अर्थात यह तब काम नहीं करेगा जब वेब फोंट या तो अवरुद्ध हो जाते हैं (जैसे बैंडविड्थ या सुरक्षा कारणों से) या कस्टम फोंट द्वारा अधिलेखित (जैसे स्वास्थ्य कारणों से, जैसे डिस्लेक्सिया, आदि)।

— tomasz86

22

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

word-spacing: -100%;

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

word-spacing: -1ch;

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

बेला

— इल्या स्ट्रेलित्सिन
स्रोत

शब्द-रिक्ति के लिए +1, हालांकि -0.5ch सही मूल्य है, -1ch पाठ बिना रिक्त स्थान के पठनीय नहीं होगा, -0.5ch फ़ॉन्ट-आकार की तरह व्यवहार करता है: 0; पाठ तत्वों पर स्पष्ट सेट आकार के साथ। :)

— डेनिस 98

6

@ Dennis98, -1ch (कूरियर न्यू) की तरह ही monospace फोंट के लिए काम करता है, क्योंकि उनके सभी पात्रों सहित एक ही चौड़ाई, है ' 'और '0'। गैर-मोनोस्पेस फोंट में चौड़ाई ' 'और '0'वर्णों के बीच कोई उपयुक्त-उपयुक्त जादू अनुपात chनहीं होता है , इसलिए यह बहुत उपयोगी नहीं है।

— इल्या स्ट्रेल्ट्सिन

इसके बजाय word-spacing, हम letter-spacingएक मनमाने ढंग से बड़े नकारात्मक मूल्य के साथ उपयोग कर सकते हैं जैसा कि मेरे उत्तर

— S.Serpooshan

20

दुर्भाग्य से, यह 2019 है और white-space-collapseअभी भी लागू नहीं हुआ है।

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

— द्विध्रुव आघूर्ण
स्रोत

16

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

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

— Plippie
स्रोत

13

सरल:

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

मूल तत्व को छूने की आवश्यकता नहीं है।

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

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

W3Schools - शब्द-रिक्ति गुण

— मार्टिन श्नाइडर
स्रोत

0.25em "डिफ़ॉल्ट शब्द-रिक्ति" नहीं है, यह टाइम्स न्यू रोमन फ़ॉन्ट में व्हाट्सएप चरित्र की चौड़ाई है जो कि कुछ लोकप्रिय ओएस में डिफ़ॉल्ट फ़ॉन्ट होता है। हेल्वेटिका जैसे अन्य लोकप्रिय फोंट में अक्सर व्यापक व्हाट्सएप चरित्र होता है, इसलिए उनमें से केवल 0.25em को हटाने से अंतराल से छुटकारा पाने के लिए अपर्याप्त होगा।

— इल्या स्ट्रेलित्सिन

12

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 पीएक्स बेहतर हो सकता है) ठीक उसी तरह जैसा कि आप इसे काम करने की उम्मीद करेंगे।

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

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

एक बार में दो मुद्दों को हल करना।

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

http://jsfiddle.net/fD5u3/

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

— वैल
स्रोत

के बजाय -4pxके लिए letter-spacingजो पर्याप्त नहीं बड़े फ़ॉन्ट-आकार के लिए हो सकता है इस बेला देखें: उदाहरण के लिए , हम एक बड़ा मूल्य में के रूप में इस्तेमाल कर सकते हैं अपनी पोस्ट

— S.Serpooshan

12

हालांकि, तकनीकी रूप से इस सवाल का जवाब नहीं है: "मैं इनलाइन-ब्लॉक तत्वों के बीच की जगह को कैसे हटाऊं?"

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

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

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

— सियान बाल्टाजार
स्रोत

हालांकि तकनीकी रूप से "इनलाइन-ब्लॉक के साथ क्या मैं ऐसा कर सकता हूं" का जवाब नहीं है, यह मुझे एक सुंदर समाधान लगता है ...

— लुकास

10

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

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

    float: left;
}

और हो गया।

— FlyC
स्रोत

9

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

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

p span {
  display: inline-block;
  background: red;
}

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

स्निपेट का विस्तार करें

एक ही पंक्ति में टैग के साथ उदाहरण

p span {
  display: inline-block;
  background: red;
}

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

स्निपेट का विस्तार करें

एक अन्य कुशल विधि एक सीएसएस नौकरी है जो font-size:0मूल तत्व का उपयोग कर रही है और font-sizeएक बच्चे के तत्व को जितना चाहें उतना दे ।

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

स्निपेट का विस्तार करें

उपरोक्त विधियां पूरे अनुप्रयोग के आधार पर कहीं काम नहीं कर सकती हैं, लेकिन अंतिम विधि इस स्थिति के लिए एक मूर्खतापूर्ण समाधान है और इसका उपयोग कहीं भी किया जा सकता है।

— गौरव अग्रवाल
स्रोत

इस पद्धति के लिए एक नुकसान यह है कि हमें इसे डिफ़ॉल्ट फ़ॉन्ट-आकार (जैसे 14px) को दोहराने और इसे बाल तत्वों में सामान्य करने के लिए दोहराने की आवश्यकता है!

— एस। सेपोशन

8

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

— नेल्सन कॉन्सिएको
स्रोत

7

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>

स्निपेट का विस्तार करें

— WSC
स्रोत

1

हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है। कृपया अपने कोड को व्याख्यात्मक टिप्पणियों के साथ भीड़ न दें, इससे कोड और स्पष्टीकरण दोनों की पठनीयता कम हो जाती है!

— आशीष आहूजा

मुझे लगता है कि है कि floatऔर display:inline-blockके लिए spanरों यदि मामले के लिए फ़ॉलबैक होने के लिए बने थे flexसमर्थित नहीं है, लेकिन floatप्रभावी ढंग से करने का प्रभाव छोड़ दिए जाएंगे inline-block, ताकि बाद बेमानी लगता है।

— इल्या स्ट्रेलित्सिन

6

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

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

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

http://cdpn.io/dKIjo

— StephenESC
स्रोत

एंड्रॉइड के लिए फ़ायरफ़ॉक्स में, मुझे बक्से के बीच 1px का स्थान दिखाई देता है।

— 23इमे विद्या

5

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

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

स्निपेट का विस्तार करें

— S.Serpooshan
स्रोत

यहाँ वही बात हो रही है letter-spacing:normalजो आपको सभी बाल तत्वों में सेट करने की आवश्यकता है ।

— गौरव अग्रवाल

@ गौरव अग्रवाल लेकिन समय letter-spacingके 99.99% के रूप में है normal। फ़ॉन्ट-आकार का ऐसा कोई निश्चित मान नहीं है और यह बहुत कुछ डिज़ाइन पर निर्भर करता है। यह फ़ॉन्ट-परिवार और अन्य चीजों के आधार पर एक छोटा मूल्य या बड़ा मूल्य हो सकता है ... मैं अपने जीवन में कभी भी किसी विशेष मूल्य (0 / सामान्य से अधिक) को देखने / उपयोग करने के लिए याद नहीं करता letter-spacing, इसलिए मुझे लगता है कि यह सुरक्षित है बेहतर विकल्प

— S.Serpooshan

मैं इससे सहमत नहीं हूं ... सभी तत्वों के साथ सामान्य अक्षरों का उपयोग करना और फ़ॉन्ट-आकार का भी उपयोग करना (यदि आवश्यक हो) उर दोहरे कोड के रूप में सभी उपयोगी नहीं है, जहां यू को फ़ॉन्ट आकार बदलने की आवश्यकता है। फ़ॉन्ट आकार का उपयोग करने से दोहरा कोड नहीं बनेगा और इसे ओ मानक आकार और किसी अन्य कस्टम आकार का उपयोग किया जा सकता है। मेरा सुझाव है कि आप इन दिनों Google का उपयोग करें और फ़ॉन्ट आकार की जांच करें जो सबसे स्वीकार्य है। समय के साथ समाधान बदलता है :)

— गौरव अग्रवाल

मुझे समझ में नहीं आ रहा है कि आपके द्वारा "... और फ़ॉन्ट-आकार का उपयोग करने का क्या मतलब है (यदि आवश्यक हो) यूआरएल डबल कोड लिखने के रूप में सभी उपयोगी नहीं है, जहां यू को फ़ॉन्ट आकार बदलने की आवश्यकता है।" मेरे पोस्ट में, कोई फॉन्ट-साइज़ सेटिंग नहीं है! सब मैंने किया था पत्र-रिक्ति जो आमतौर पर कोई भी अपने सीएसएस में सेट नहीं करता है (यह हमेशा सामान्य होता है)। ans जैसा कि हम फ़ॉन्ट-आकार नहीं बदलते हैं, हमें इसे वापस सेट करने के लिए मूल फ़ॉन्ट-आकार को जानने की आवश्यकता नहीं है

— S.Serpooshan

मुझे लगता है कि यह विधि पहले लोकप्रिय नहीं हुई क्योंकि यह ओपेरा / प्रेस्टो में काम नहीं करती थी। और वर्तमान में हमारे पास अन्य विकल्प हैं, जिन्हें ऐसे वर्कअराउंड की आवश्यकता नहीं है, जैसे कि इनलाइन-ब्लॉक के बजाय फ्लेक्सबॉक्स का उपयोग करना।

— इल्या स्ट्रेल्टसिन

4

इस प्रश्न का सबसे सरल उत्तर जोड़ना है।

सीएसएस

float: left;

कोडपेन लिंक: http://jsfiddle.net/dGHFV/3560/

— गोकुल
स्रोत

3

PHP कोष्ठक के साथ:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

स्निपेट का विस्तार करें

— Alexufo
स्रोत

2

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

— जेआरडी
स्रोत

4

यदि उपयोगकर्ता अपने ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट-आकार को बदलता है तो यह काम नहीं करेगा। बेहतर उपयोग -0.25em।

— मार्टिन श्नाइडर

1

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

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

p {
  text-space-collapse: discard;
}

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

— सेबस्टियन जार्टनर
स्रोत

1

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

span {
    display: table-cell;
}

— फ्रांज डेस्क्लर
स्रोत

यह सवाल इनलाइन-ब्लॉक के बारे में है।

— मदन भंडारी

@ मदनभंडारी सही है लेकिन यह सभी गंदे हैक की जरूरत को दूर करता है।

— डेविड

1

white-space: nowrapकंटेनर तत्व में जोड़ें :

सीएसएस:

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

HTML:

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

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

— मिलाद
स्रोत

फ्लोट के बिना काम नहीं करता है - जो आपके प्लंकर में गायब है। इसलिए "व्हाइट-स्पेस: नॉवरैप" कभी भी काम का जवाब नहीं लगता है।

— डेविड

1

वहाँ की तरह समाधान के बहुत सारे हैं font-size:0, word-spacing, margin-left, letter-spacingऔर इतने पर।

आम तौर पर मैं का उपयोग करना पसंद letter-spacingहै क्योंकि

यह तब ठीक लगता है जब हम एक मान प्रदान करते हैं जो अतिरिक्त स्थान की चौड़ाई से बड़ा होता है (जैसे -1em)।
हालाँकि, यह ठीक नहीं होगा word-spacingऔर margin-leftजब हम जैसे बड़े मूल्य निर्धारित करेंगे -1em।
उपयोग करना font-sizeसुविधाजनक नहीं है जब हम इकाई के emरूप में उपयोग करने का प्रयास करते हैं font-size।

तो, letter-spacingसबसे अच्छा विकल्प लगता है।

हालाँकि, मुझे आपको चेतावनी देनी होगी

जब आप उपयोग करते हैं letter-spacingतो आपके पास दूसरों का उपयोग करना बेहतर था -0.3emया -0.31emनहीं।

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

स्निपेट का विस्तार करें

यदि आप Chrome (परीक्षण संस्करण 66.0.3359.139) या ओपेरा (परीक्षण संस्करण 53.0.2907.99) का उपयोग कर रहे हैं, तो आप जो देखते हैं वह हो सकता है:

यदि आप फ़ायरफ़ॉक्स (60.0.2), IE10 या एज का उपयोग कर रहे हैं, तो आप जो देखते हैं वह हो सकता है:

यह तो दिलचस्प है। इसलिए, मैंने mdn-letter-spacing की जाँच की और यह पाया:

लंबाई

वर्णों के बीच डिफ़ॉल्ट स्थान के अतिरिक्त अतिरिक्त अंतर-वर्ण स्थान निर्दिष्ट करता है। मान नकारात्मक हो सकते हैं, लेकिन कार्यान्वयन-विशिष्ट सीमाएं हो सकती हैं। उपयोगकर्ता एजेंट पाठ को सही ठहराने के लिए अंतर-वर्ण स्थान को और बढ़ा या घटा नहीं सकते हैं।

ऐसा लगता है कि यही कारण है।

— xianshenglu
स्रोत

1

जोड़े letter-spacing:-4px;माता-पिता पर pसीएसएस और जोड़ने के letter-spacing:0px;अपने को spanसीएसएस।

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

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

स्निपेट का विस्तार करें

— मार्क सलवानिया
स्रोत

1

मुझे लगा कि मैं इस सवाल में कुछ नया जोड़ूंगा, क्योंकि वर्तमान में दिए गए कई उत्तर पर्याप्त और प्रासंगिक हैं, कुछ नए सीएसएस गुण हैं जो सभी ब्राउज़र में पूर्ण समर्थन के साथ और बहुत कम करने के लिए एक बहुत ही साफ आउटपुट प्राप्त कर सकते हैं। कोई 'हैक' नहीं। इससे दूर चला जाता है, inline-blockलेकिन यह आपको वही परिणाम देता है जो प्रश्न के लिए पूछा जाता है।

ये सीएसएस गुण हैं grid

CSS ग्रिड को IE के अलावा अत्यधिक समर्थित ( CanIUse ) दिया जाता है, जिसे केवल a की आवश्यकता होती है-ms- काम करने के लिए उपसर्ग की ।

सीएसएस ग्रिड भी अत्यधिक सुविधाजनक है और से सब अच्छा भागों लेता है table, flexऔर inline-blockतत्वों और उन्हें एक स्थान में लाता है।

जब gridआप बनाते हैं तो पंक्तियों और स्तंभों के बीच अंतराल को निर्दिष्ट कर सकते हैं। डिफ़ॉल्ट अंतराल पहले से ही सेट है, 0pxलेकिन आप इस मूल्य को अपनी पसंद के अनुसार बदल सकते हैं।

इसे थोड़ा छोटा करने के लिए, एक प्रासंगिक कार्य उदाहरण प्रस्तुत करता है:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

स्निपेट का विस्तार करें

— Stewartside
स्रोत

केवल एक display:gridतत्व की सामग्री को इंगित करने के लिए टिप्पणी करना अवरुद्ध है, इसलिए यह इतना अधिक नहीं है कि प्रदर्शन: ग्रिड आपको इनलाइन-ब्लॉक लेआउट के साथ काम करने में मदद करता है, बल्कि यह आपको inline-blockकुछ के साथ काम करने की जगह देता है जहां आप 'गटर' को नियंत्रित कर सकते हैं यह सवाल करना चाहता है। इसके अलावा, मैं वास्तव में आश्चर्यचकित हूं कि अब तक सीएसएस ग्रिड लेआउट समाधान के साथ किसी ने भी जवाब नहीं दिया है।

— टायलरएच

यह स्पष्ट कर देगा कि यह एक परिवर्तन है inline-block। और हाँ, मैं भी हैरान था, लगता है कि gridअनुभव के साथ कोई भी वास्तव में इससे पहले नहीं आया था। इसके साथ थोड़ा सा खेल रहे हैं और इस सवाल पर आए तो सोचा क्यों नहीं: P

— स्टीवर्टसाइड

0

एक और तरीका मैंने पाया कि पंक्ति के पहले तत्व को छोड़कर, नकारात्मक-मान के रूप में मार्जिन-लेफ्ट को लागू करना है।

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

— सुखमिंदर परमार
स्रोत

0

हर सवाल, कि inline-blockएस के बीच की जगह को हटाने की कोशिश की तरह लगता है एक<table> मुझे है ...

कुछ इस तरह की कोशिश करो:

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>

स्निपेट का विस्तार करें

— उसगी मियामोटो
स्रोत