ฉันจะลบช่องว่างระหว่างองค์ประกอบ inline / inline-block ได้อย่างไร

รับ HTML และ CSS นี้:

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

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

ดังนั้นจะมีช่องว่างกว้าง 4 พิกเซลระหว่างองค์ประกอบ SPAN

การสาธิต: http://jsfiddle.net/dGHFV/

ฉันเข้าใจว่าทำไมสิ่งนี้ถึงเกิดขึ้นและฉันก็รู้ว่าฉันสามารถกำจัดพื้นที่นั้นได้ด้วยการลบช่องว่างสีขาวระหว่างองค์ประกอบ SPAN ในซอร์สโค้ด HTML เช่น:

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

อย่างไรก็ตามฉันหวังว่าโซลูชัน CSS ที่ไม่ต้องการซอร์สโค้ด HTML จะต้องได้รับการแก้ไข

ฉันรู้วิธีแก้ปัญหานี้ด้วย JavaScript - โดยการลบโหนดข้อความจากองค์ประกอบภาชนะ (ย่อหน้า) เช่น:

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

ตัวอย่าง: http://jsfiddle.net/dGHFV/1/

แต่ปัญหานี้สามารถแก้ไขได้ด้วย CSS เท่านั้นหรือไม่

เนื่องจากคำตอบนี้ค่อนข้างเป็นที่นิยมฉันเขียนใหม่อย่างมีนัยสำคัญ

อย่าลืมคำถามจริงที่ถามไว้:

จะลบช่องว่างระหว่างองค์ประกอบในบล็อกได้อย่างไร ฉันหวังว่าโซลูชัน CSS ที่ไม่ต้องการซอร์สโค้ด HTML จะต้องได้รับการแก้ไข สามารถแก้ไขปัญหานี้ด้วย CSS เพียงอย่างเดียวได้หรือไม่

มันเป็นไปได้ที่จะแก้ปัญหานี้ด้วย CSS เพียงอย่างเดียว แต่ไม่มีสมบูรณ์แก้ไข CSS ที่แข็งแกร่ง

ทางออกที่ฉันมีในคำตอบเริ่มต้นคือการเพิ่มfont-size: 0องค์ประกอบผู้ปกครองแล้วประกาศความรู้สึกที่มีfont-sizeต่อเด็ก

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

สิ่งนี้ใช้ได้กับเบราว์เซอร์รุ่นใหม่ล่าสุดทุกรุ่น มันทำงานได้ใน IE8 มันไม่ทำงานใน Safari 5 แต่มันไม่ทำงานใน Safari 6. Safari 5 เกือบตายเบราว์เซอร์ ( 0.33% สิงหาคม 2015 )

ปัญหาที่เป็นไปได้ส่วนใหญ่ที่มีขนาดตัวอักษรสัมพัทธ์ไม่ซับซ้อนในการแก้ไข

อย่างไรก็ตามในขณะที่นี่เป็นวิธีแก้ปัญหาที่เหมาะสมถ้าคุณต้องการแก้ไข CSS เท่านั้นโดยเฉพาะมันไม่ใช่สิ่งที่ฉันแนะนำถ้าคุณมีอิสระในการเปลี่ยน HTML ของคุณ (ส่วนใหญ่เราเป็น)

นี่คือสิ่งที่ฉันเป็นนักพัฒนาเว็บที่มีประสบการณ์พอสมควรจริง ๆ แล้วทำเพื่อแก้ไขปัญหานี้:

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

ใช่ถูกแล้ว. ฉันลบช่องว่างใน HTML ระหว่างองค์ประกอบแบบอินไลน์บล็อก

มันเป็นเรื่องง่าย. มันง่ายมาก มันทำงานได้ทุกที่ มันเป็นวิธีแก้ปัญหาอย่างจริงจัง

บางครั้งคุณต้องพิจารณาอย่างรอบคอบว่าช่องว่างมาจากไหน การผนวกองค์ประกอบอื่นด้วย JavaScript จะเพิ่มช่องว่างหรือไม่ไม่ไม่ถ้าคุณทำอย่างถูกต้อง

ไปกันเถอะการเดินทางที่มหัศจรรย์ในหลาย ๆ วิธีเพื่อลบช่องว่างด้วย 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หวังว่าคุณลืมเกี่ยวกับทุก

หรือคุณสามารถใช้ 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

แก้ไข:

วันนี้เราก็ควรจะใช้flexbox

คำตอบเดิม:

ตกลงแม้ว่าฉันได้ upvoted ทั้งสองfont-size: 0;และnot implemented CSS3 featureคำตอบหลังจากที่พยายามผมพบว่าไม่มีของพวกเขาเป็นวิธีการแก้ปัญหาที่แท้จริง

อันที่จริงไม่มีวิธีแก้ปัญหาแม้แต่ข้อเดียวโดยไม่มีผลข้างเคียงที่รุนแรง

จากนั้นฉันตัดสินใจที่จะลบช่องว่าง (คำตอบนี้เกี่ยวกับอาร์กิวเมนต์นี้) ระหว่างinline-blockdiv จาก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>

ที่อ่านไม่ได้ยากต่อการเข้าใจและอื่น ๆ

วิธีแก้ปัญหาที่ฉันพบ:

ใช้ความคิดเห็น HTML เพื่อเชื่อมต่อจุดสิ้นสุดของ div หนึ่งไปยังจุดเริ่มต้นของอีกอัน!

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

เทคนิคการกำจัดอวกาศทั้งหมดสำหรับdisplay:inline-blockแฮ็กที่น่ารังเกียจ ...

ใช้Flexbox

มันยอดเยี่ยมแก้รูปแบบบล็อกแบบอินไลน์ได้ทั้งหมดนี้และในปี 2017 มีการสนับสนุนเบราว์เซอร์ 98% (ยิ่งถ้าคุณไม่สนใจ IE เก่า)

• เราพร้อมที่จะใช้ Flexbox หรือไม่?
• การใช้ CSS กล่องที่ยืดหยุ่น - คู่มือสำหรับนักพัฒนาเว็บ | MDN
• คู่มือฉบับสมบูรณ์สำหรับ Flexbox | CSS-เคล็ดลับ
• Flexy Boxes - CSS flexbox playground และเครื่องมือสร้างรหัส

เพิ่ม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>

นี่คือคำตอบเดียวกับที่ฉันบอกไปในสิ่งที่เกี่ยวข้อง: Display: Inline block - พื้นที่นั้นคืออะไร?

จริงๆแล้วมีวิธีง่าย ๆ ในการลบช่องว่างออกจากบล็อกแบบอินไลน์ซึ่งทั้งง่ายและความหมาย มันเรียกว่าแบบอักษรที่กำหนดเองที่มีช่องว่างความกว้างเป็นศูนย์ซึ่งช่วยให้คุณสามารถยุบช่องว่าง (เพิ่มโดยเบราว์เซอร์สำหรับองค์ประกอบแบบอินไลน์เมื่อพวกเขาอยู่ในบรรทัดที่แยกต่างหาก) ที่ระดับตัวอักษรโดยใช้แบบอักษรเล็ก ๆ เมื่อคุณประกาศตัวอักษรคุณเพียงแค่เปลี่ยนfont-familyบนคอนเทนเนอร์และกลับมาที่เด็ก ๆ และ voila แบบนี้:

@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 Drive ดังนั้นคุณจะต้องคลิกไฟล์> ดาวน์โหลดเพื่อบันทึกลงในคอมพิวเตอร์ของคุณ คุณอาจต้องเปลี่ยนพา ธ แบบอักษรเช่นกันหากคุณคัดลอกประกาศไปยังไฟล์ css หลักของคุณ

สองตัวเลือกเพิ่มเติมตามCSS Text Module Level 3 (แทนที่จะwhite-space-collapsing:discardถูกลบจากร่างข้อมูลจำเพาะ):

• word-spacing: -100%;

ในทางทฤษฎีมันควรจะทำสิ่งที่ต้องการ - ตัดช่องว่างระหว่าง 'คำพูด' ให้สั้นลงโดย 100% ของความกว้างของอักขระเว้นวรรคคือ 0 แต่ดูเหมือนว่าจะไม่สามารถทำงานได้ทุกที่โชคไม่ดีและคุณลักษณะนี้มีการทำเครื่องหมาย 'ที่มีความเสี่ยง' (สามารถตกจากสเปคได้เช่นกัน)

• word-spacing: -1ch;

มันทำให้ช่องว่างระหว่างคำสั้นลงตามความกว้างของตัวเลข '0' ในฟอนต์แบบอวกาศควรจะเท่ากับความกว้างของอักขระเว้นวรรค (และอักขระอื่น ๆ เช่นกัน) สิ่งนี้ใช้ได้ใน Firefox 10+, Chrome 27+ และเกือบจะใช้ได้ใน Internet Explorer 9+

ซอ

น่าเสียดายที่มันคือ 2019 และwhite-space-collapseยังไม่ได้ใช้งาน

ในระหว่างนี้ให้มอบองค์ประกอบหลักfont-size: 0;และตั้งค่าให้font-sizeกับเด็ก ๆ สิ่งนี้ควรทำเคล็ดลับ

ใช้ flexbox และย้อนกลับ (จากคำแนะนำด้านบน) สำหรับเบราว์เซอร์รุ่นเก่า:

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

ง่าย:

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

ไม่จำเป็นต้องแตะองค์ประกอบหลัก

เงื่อนไขที่นี่เท่านั้น: ต้องไม่กำหนดขนาดแบบอักษรของรายการ (ต้องเท่ากับขนาดแบบอักษรของพาเรนต์)

0.25em เป็นค่าเริ่มต้น word-spacing

W3Schools - คุณสมบัติการเว้นวรรคคำ

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>

เท่าที่ฉันรู้ (ฉันอาจจะผิด) แต่เบราว์เซอร์ทั้งหมดรองรับวิธีนี้

คำอธิบาย :

งานนี้ (อาจ -3px อาจจะดีกว่า) ตรงตามที่คุณคาดว่าจะทำงาน

• คุณคัดลอกและวางรหัส (หนึ่งครั้ง)
• จากนั้นใน html ของคุณเพียงใช้class="items"กับพาเรนต์ของแต่ละ inline-block

คุณไม่จำเป็นต้องกลับไปที่ css และเพิ่มกฎ css อีกอันสำหรับบล็อกอินไลน์ใหม่ของคุณ

การแก้ไขสองประเด็นในครั้งเดียว

โปรดสังเกตด้วย>(ยิ่งกว่าเครื่องหมาย) ซึ่งหมายความว่า * / เด็กทุกคนควรอยู่ในบล็อก

http://jsfiddle.net/fD5u3/

หมายเหตุ: ฉันได้ปรับเปลี่ยนเพื่อรองรับการสืบทอดระยะห่างตัวอักษรเมื่อ wrapper มี wrapper ลูก

แม้ว่าเทคนิคจะไม่ได้คำตอบสำหรับคำถาม: "ฉันจะลบช่องว่างระหว่างองค์ประกอบแบบอินไลน์บล็อกได้อย่างไร"

คุณสามารถลองใช้วิธีการแก้ปัญหา flexbox และใช้รหัสด้านล่างและพื้นที่จะถูกลบ

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

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับมันได้ที่ลิงค์นี้: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ฉันไม่แน่ใจว่าถ้าคุณต้องการสร้างสีน้ำเงินสองช่วงโดยไม่มีช่องว่างหรือต้องการจัดการพื้นที่สีขาวอื่น ๆ แต่ถ้าคุณต้องการลบช่องว่าง:

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

    float: left;
}

และเสร็จแล้ว

โดยทั่วไปเราใช้องค์ประกอบเช่นนี้ในบรรทัดที่แตกต่างกัน แต่ในกรณีของ 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>

อีกวิธีที่มีประสิทธิภาพคืองาน CSS ที่ใช้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>

วิธีการข้างต้นอาจไม่ทำงานที่ใดที่หนึ่งขึ้นอยู่กับแอปพลิเคชันทั้งหมด แต่วิธีสุดท้ายเป็นวิธีการแก้ปัญหาที่เข้าใจไม่ได้สำหรับสถานการณ์นี้และสามารถใช้ได้ทุกที่

ฉันมีปัญหานี้ในตอนนี้และจากfont-size:0;ฉันพบว่าใน Internet Explorer 7 ปัญหายังคงอยู่เพราะ Internet Explorer คิดว่า "Font Size 0?!?! WTF คุณเป็นคนบ้าเหรอ?" - ดังนั้นในกรณีของฉันฉันได้รีเซ็ต CSS ของ Eric Meyer และfont-size:0.01em;ฉันมีความแตกต่าง 1 พิกเซลจาก Internet Explorer 7 ถึง Firefox 9 ดังนั้นฉันคิดว่านี่เป็นวิธีแก้ปัญหา

ฉันได้รับการแก้ปัญหานี้เมื่อเร็ว ๆ นี้และแทนที่จะของการตั้งผู้ปกครองfont-size:0แล้วการตั้งค่าด้านหลังของเด็กให้เป็นค่าที่เหมาะสมฉันได้รับผลที่สอดคล้องกันโดยการตั้งค่าภาชนะผู้ปกครองแล้วเด็กกลับไปletter-spacing:-.25emletter-spacing:normal

ในเธรดอื่นฉันเห็นผู้วิจารณ์พูดถึงว่าfont-size:0ไม่เหมาะเสมอไปเพราะผู้ใช้สามารถควบคุมขนาดแบบอักษรขั้นต่ำในเบราว์เซอร์ได้

การใช้ ems ปรากฏขึ้นเพื่อใช้งานโดยไม่คำนึงว่าขนาดตัวอักษรที่ระบุคือ 100%, 15pt หรือ 36px

http://cdpn.io/dKIjo

ฉันคิดว่ามีวิธีง่าย ๆ / เก่าสำหรับสิ่งนี้ซึ่งได้รับการสนับสนุนโดยเบราว์เซอร์ทั้งหมดแม้ 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>

คำตอบที่ง่ายที่สุดสำหรับคำถามนี้คือการเพิ่ม

CSS

float: left;

ลิงค์ codepen: http://jsfiddle.net/dGHFV/3560/

ด้วยวงเล็บ PHP:

ul li {
  display: inline-block;
}

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

ฉันจะขยายคำตอบของ user5609829 เล็กน้อยเพราะฉันเชื่อว่าโซลูชันอื่น ๆ ที่นี่ซับซ้อนเกินไป / ทำงานมากเกินไป การใช้ a margin-right: -4pxกับองค์ประกอบบล็อกแบบอินไลน์จะลบระยะห่างและรองรับโดยเบราว์เซอร์ทั้งหมด ดูซอปรับปรุงที่นี่ สำหรับผู้ที่เกี่ยวข้องกับการใช้อัตรากำไรเชิงลบลองให้นี้อ่าน

ข้อกำหนดคุณสมบัติCSS Text Module Level 4 กำหนดtext-space-collapseสถานที่ให้บริการซึ่งจะช่วยให้การควบคุมวิธีการสีขาวภายในพื้นที่และรอบ ๆ เป็นองค์ประกอบที่มีการประมวลผล

ดังนั้นเกี่ยวกับตัวอย่างของคุณคุณจะต้องเขียนสิ่งนี้:

p {
  text-space-collapse: discard;
}

แต่น่าเสียดายที่เบราว์เซอร์ที่ไม่มีการใช้คุณสมบัตินี้เลย ( ณ กันยายน 2016) ตามที่กล่าวไว้ในการแสดงความคิดเห็นกับคำตอบของ HBP

ฉันพบโซลูชัน CSS บริสุทธิ์ที่ทำงานได้ดีสำหรับเบราว์เซอร์ทั้งหมด:

span {
    display: table-cell;
}

เพิ่ม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
}

HTML:

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

นี่คือPlunker

มีจำนวนมากของการแก้ปัญหาเป็นเหมือนfont-size:0, word-spacing, margin-left, letter-spacingและอื่น ๆ

ปกติฉันชอบใช้letter-spacingเพราะ

1. ดูเหมือนว่าตกลงเมื่อเรากำหนดค่าที่ใหญ่กว่าความกว้างของพื้นที่พิเศษ (เช่น-1em)
2. แต่ก็จะไม่โอเคกับword-spacingและเมื่อเรากำหนดค่าที่ใหญ่กว่าเช่นmargin-left-1em
3. การใช้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) หรือ Opera (รุ่นทดสอบ 53.0.2907.99) สิ่งที่คุณเห็นอาจเป็น:

หากคุณใช้ Firefox (60.0.2) IE10 หรือ Edge สิ่งที่คุณเห็นอาจเป็น:

นั่นดูน่าสนใจ. ดังนั้นฉันตรวจสอบmdn-letter-spacingและพบสิ่งนี้:

ความยาว

ระบุช่องว่างระหว่างอักขระเพิ่มเติมนอกเหนือจากช่องว่างเริ่มต้นระหว่างอักขระ ค่าอาจเป็นค่าลบ แต่อาจมีข้อ จำกัด เฉพาะการใช้งาน ตัวแทนผู้ใช้อาจไม่เพิ่มหรือลดช่องว่างระหว่างตัวละครเพื่อปรับข้อความ

ดูเหมือนว่านี่คือเหตุผล

เพิ่มcss letter-spacing:-4px;หลักpและเพิ่มลงletter-spacing:0px;ในspancss ของคุณ

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>

ฉันคิดว่าฉันจะเพิ่มสิ่งใหม่ให้กับคำถามนี้แม้ว่าคำตอบที่ให้ไว้ในปัจจุบันนั้นมีมากเกินพอ & มีความเกี่ยวข้องมีคุณสมบัติ CSS ใหม่ซึ่งสามารถบรรลุผลลัพธ์ที่สะอาดมากพร้อมการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมดและเล็กน้อย ไม่มี 'แฮ็ก' สิ่งนี้จะย้ายออกไปinline-blockแต่จะให้ผลลัพธ์เหมือนกับคำถามที่ถาม

คุณสมบัติ CSS เหล่านี้คือ grid

CSS Grid ได้รับการสนับสนุนอย่างสูง ( CanIUse ) นอกเหนือจาก IE ซึ่งต้องการเพียงส่วน-ms-นำหน้าเพื่อให้สามารถใช้งานได้

CSS ตารางยังมีความยืดหยุ่นสูงและใช้เวลาทั้งหมดส่วนที่ดีจากtable, flexและinline-blockองค์ประกอบและนำพวกเขาเข้าไปในสถานที่แห่งหนึ่ง

เมื่อสร้าง a 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>

อีกวิธีหนึ่งที่ฉันพบคือการใช้ระยะขอบซ้ายเป็นค่าลบยกเว้นองค์ประกอบแรกของแถว

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

ทุกคำถามที่พยายามลบช่องว่างระหว่างinline-blocks ดูเหมือนจะเป็น<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>