Làm cách nào để xóa khoảng trắng giữa các thành phần nội tuyến / khối nội tuyến?

Đưa ra HTML và CSS này:

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

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

Kết quả là, sẽ có một không gian rộng 4 pixel giữa các phần tử SPAN.

Bản trình diễn: http://jsfiddle.net/dGHFV/

Tôi hiểu lý do tại sao điều này xảy ra và tôi cũng biết rằng tôi có thể thoát khỏi không gian đó bằng cách xóa khoảng trắng giữa các thành phần SPAN trong mã nguồn HTML, như vậy:

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

Tuy nhiên, tôi đã hy vọng một giải pháp CSS không yêu cầu mã nguồn HTML bị giả mạo.

Tôi biết cách giải quyết vấn đề này bằng JavaScript - bằng cách loại bỏ các nút văn bản khỏi thành phần chứa (đoạn văn), như vậy:

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

Bản trình diễn: http://jsfiddle.net/dGHFV/1/

Nhưng vấn đề này có thể được giải quyết chỉ với CSS không?

Vì câu trả lời này đã trở nên khá phổ biến, tôi viết lại nó một cách đáng kể.

Chúng ta đừng quên câu hỏi thực tế đã được hỏi:

Làm thế nào để loại bỏ không gian giữa các yếu tố khối nội tuyến ? Tôi đã hy vọng một giải pháp CSS không yêu cầu mã nguồn HTML bị giả mạo. Vấn đề này có thể được giải quyết chỉ với CSS không?

Đó là khả năng để giải quyết vấn đề này với một mình CSS, nhưng không có hoàn toàn sửa CSS mạnh mẽ.

Giải pháp tôi có trong câu trả lời ban đầu của mình là thêm font-size: 0vào phần tử cha mẹ, và sau đó khai báo một điều hợp lý font-sizevới con cái.

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

Điều này hoạt động trong các phiên bản gần đây của tất cả các trình duyệt hiện đại. Nó hoạt động trong IE8. Nó không làm việc trong Safari 5, nhưng nó không làm việc trong Safari 6. Safari 5 là gần một trình duyệt chết ( 0,33%, tháng 8 năm 2015 ).

Hầu hết các vấn đề có thể xảy ra với kích thước phông chữ tương đối không phức tạp để khắc phục.

Tuy nhiên, mặc dù đây là một giải pháp hợp lý nếu bạn đặc biệt chỉ cần sửa CSS, nhưng đó không phải là điều tôi khuyên nếu bạn có thể tự do thay đổi HTML của mình (như hầu hết chúng ta đều như vậy).

Đây là những gì tôi, với tư cách là một nhà phát triển web có kinh nghiệm hợp lý, thực sự làm để giải quyết vấn đề này:

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

Vâng đúng vậy. Tôi xóa khoảng trắng trong HTML giữa các thành phần khối nội tuyến.

Dễ thôi. Thật đơn giản. Nó hoạt động ở khắp mọi nơi. Đó là giải pháp thực dụng.

Đôi khi bạn phải xem xét cẩn thận khoảng trắng sẽ đến từ đâu. Sẽ nối thêm một phần tử khác với JavaScript thêm khoảng trắng? Không, không nếu bạn làm điều đó đúng.

Chúng ta hãy thực hiện một hành trình kỳ diệu theo nhiều cách khác nhau để xóa khoảng trắng, với một số HTML mới:

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

• Bạn có thể làm điều này, như tôi thường làm:

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

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

• Hoặc, cái này:

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

• Hoặc, sử dụng nhận xét:

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

• Hoặc, nếu bạn đang sử dụng PHP hoặc tương tự:

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

• Hoặc, bạn thậm chí có thể bỏ qua hoàn toàn các thẻ đóng nhất định (tất cả các trình duyệt đều ổn với điều này):

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

Bây giờ tôi đã đi và chán bạn đến chết với "một ngàn cách khác nhau để xóa khoảng trắng, bằng ba mươi phút", hy vọng bạn đã quên tất cả font-size: 0.

Ngoài ra, giờ đây bạn có thể sử dụng flexbox để đạt được nhiều bố cục mà trước đây bạn có thể đã sử dụng khối nội tuyến cho: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Đối với các trình duyệt tuân thủ CSS3, có white-space-collapsing:discard

xem: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

BIÊN TẬP:

ngày nay, chúng ta chỉ nên sử dụng Flexbox .

TRẢ LỜI:

OK, mặc dù tôi đã đưa ra cả câu trả lời font-size: 0;và not implemented CSS3 featurecâu trả lời, sau khi thử tôi phát hiện ra rằng không ai trong số chúng là giải pháp thực sự .

Trên thực tế, thậm chí không có một cách giải quyết nào mà không có tác dụng phụ mạnh.

Sau đó, tôi quyết định xóa khoảng trắng (câu trả lời này là về đối số này) giữa các inline-blockdiv khỏi HTMLnguồn của tôi ( JSP), biến điều này:

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

đến đây

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

đó là xấu xí, nhưng làm việc

Nhưng, chờ một phút ... những gì nếu tôi là tạo ra divs của tôi bên trong Taglibs loops( Struts2, JSTL, vv ...)?

Ví dụ:

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

Hoàn toàn không thể nghĩ đến nội tuyến tất cả những thứ đó, nó có nghĩa là

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

điều đó không thể đọc được, khó để hiểu và hiểu, v.v ...

Giải pháp tôi tìm thấy:

sử dụng các nhận xét HTML để kết nối phần cuối của một div với phần đầu của phần tiếp theo!

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

Bằng cách này, bạn sẽ có một mã thụt lề có thể đọc và chính xác.

Và, như một tác dụng phụ tích cực HTML source, mặc dù bị nhiễm bởi các bình luận trống rỗng, sẽ dẫn đến thụt lề chính xác;

hãy lấy ví dụ đầu tiên. Theo ý kiến ​​khiêm tốn của tôi, điều này:

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

tốt hơn thế này:

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

Thêm ý kiến giữa các yếu tố để KHÔNG có một khoảng trắng. Đối với tôi nó dễ hơn là đặt lại kích thước phông chữ về 0 và sau đó đặt lại.

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

Tất cả các kỹ thuật loại bỏ không gian cho display:inline-blocklà hack khó chịu ...

Sử dụng Flexbox

Thật tuyệt vời, giải quyết tất cả các bs bố cục khối nội tuyến này và đến năm 2017 có 98% hỗ trợ trình duyệt (nhiều hơn nếu bạn không quan tâm đến IE cũ).

• Chúng tôi đã sẵn sàng để sử dụng Flexbox chưa?
• Sử dụng hộp linh hoạt CSS - Hướng dẫn dành cho nhà phát triển web | MDN
• Hướng dẫn đầy đủ về Flexbox | Thủ thuật CSS
• Flexy Box - Công cụ tạo mã và sân chơi CSS flexbox

Thêm vào display: flex;phần tử cha. Đây là giải pháp có tiền tố:

Phiên bản đơn giản hóa

p {
  display: flex;
}

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

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

Khắc phục bằng tiền tố

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>

Đây là cùng một câu trả lời tôi đã đưa ra về liên quan: Hiển thị: Khối nội tuyến - Không gian đó là gì?

Thực sự có một cách thực sự đơn giản để loại bỏ khoảng trắng khỏi khối nội tuyến vừa dễ dàng vừa có ngữ nghĩa. Nó được gọi là phông chữ tùy chỉnh với khoảng trắng có độ rộng bằng 0, cho phép bạn thu gọn khoảng trắng (được trình duyệt thêm vào cho các thành phần nội tuyến khi chúng nằm trên các dòng riêng biệt) ở cấp độ phông chữ sử dụng phông chữ rất nhỏ. Khi bạn khai báo phông chữ, bạn chỉ cần thay đổi font-familytrên container và trở lại trên trẻ em và voila. Như thế này:

@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;
}

Phù hợp với khẩu vị. Đây là một bản tải xuống cho phông chữ tôi vừa nấu trong font-forge và được chuyển đổi với trình tạo webfont FontSquirrel. Mất tất cả 5 phút. @font-faceKhai báo css được bao gồm: phông chữ không gian có độ rộng bằng không được nén . Nó có trong Google Drive, vì vậy bạn sẽ cần nhấp vào Tệp> Tải xuống để lưu nó vào máy tính của mình. Có lẽ bạn cũng cần thay đổi đường dẫn phông chữ nếu bạn sao chép khai báo vào tệp css chính của mình.

Hai tùy chọn khác dựa trên Mô-đun Văn bản CSS Cấp 3 (thay vì white-space-collapsing:discardđã bị loại khỏi dự thảo thông số kỹ thuật):

• word-spacing: -100%;

Về lý thuyết, cần thực hiện chính xác những gì cần thiết - rút ngắn khoảng trắng giữa 'từ' bằng 100% chiều rộng ký tự khoảng trắng, tức là bằng không. Nhưng dường như không hoạt động ở bất cứ đâu, thật không may, và tính năng này được đánh dấu là 'có nguy cơ' (nó cũng có thể bị loại bỏ khỏi đặc điểm kỹ thuật).

• word-spacing: -1ch;

Nó rút ngắn khoảng trắng giữa các từ bằng độ rộng của chữ số '0'. Trong một phông chữ đơn cách, nó phải chính xác bằng chiều rộng của ký tự khoảng trắng (và bất kỳ ký tự nào khác). Điều này hoạt động trong Firefox 10+, Chrome 27+ và gần như hoạt động trong Internet Explorer 9+.

Vĩ cầm

Thật không may, đó là năm 2019 và white-space-collapsevẫn chưa được thực hiện.

Trong khi đó, đưa ra yếu tố cha mẹ font-size: 0;và thiết lập font-sizecon cái. cái này cần phải dùng mẹo

Sử dụng flexbox và thực hiện dự phòng (từ các đề xuất ở trên) cho các trình duyệt cũ hơn:

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

Đơn giản:

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

Không cần phải chạm vào phần tử cha.

Chỉ có điều kiện ở đây: kích thước phông chữ của mục không được xác định (phải bằng kích thước phông chữ của cha mẹ).

0.25em là mặc định word-spacing

W3Schools - thuộc tính khoảng cách

cỡ chữ: 0; có thể phức tạp hơn một chút để quản lý ...

Tôi nghĩ rằng các dòng sau đây là tốt hơn nhiều và có thể sử dụng lại nhiều hơn, và tiết kiệm thời gian hơn bất kỳ phương pháp nào khác. Cá nhân tôi sử dụng cái này:

.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;}

Sau đó, bạn có thể sử dụng nó như sau ...

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

Theo như tôi biết (tôi có thể sai) nhưng tất cả các trình duyệt đều hỗ trợ phương pháp này.

GIẢI THÍCH :

Điều này hoạt động (có thể -3px có thể tốt hơn) chính xác như bạn dự đoán nó sẽ hoạt động.

• bạn sao chép và dán mã (một lần)
• sau đó trên html của bạn chỉ cần sử dụng class="items"trên cha mẹ của mỗi khối nội tuyến.

Bạn sẽ KHÔNG cần phải quay lại css và thêm quy tắc css khác cho các khối nội tuyến mới của bạn.

Giải quyết hai vấn đề cùng một lúc.

Cũng lưu ý >(lớn hơn dấu) điều này có nghĩa là * / tất cả trẻ em phải là khối nội tuyến.

http://jsfiddle.net/fD5u3/

LƯU Ý: Tôi đã sửa đổi để phù hợp với kế thừa khoảng cách chữ cái khi một trình bao bọc có một trình bao bọc con.

Mặc dù, về mặt kỹ thuật không phải là một câu trả lời cho câu hỏi: "Làm cách nào để xóa khoảng trắng giữa các thành phần khối nội tuyến?"

Bạn có thể thử giải pháp flexbox và áp dụng mã bên dưới và không gian sẽ bị xóa.

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

Bạn có thể tìm hiểu thêm về nó trên liên kết này: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tôi không chắc chắn nếu bạn muốn tạo hai nhịp màu xanh mà không có khoảng cách hoặc muốn xử lý khoảng trắng khác, nhưng nếu bạn muốn xóa khoảng cách:

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

    float: left;
}

Và thực hiện.

Nói chung, chúng tôi sử dụng các yếu tố như thế này trong các dòng khác nhau, nhưng trong trường hợp display:inline-blocksử dụng các thẻ trong cùng một dòng sẽ xóa khoảng trắng, nhưng trong một dòng khác thì không.

Một ví dụ với các thẻ trong một dòng khác nhau:

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

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

Ví dụ với các thẻ trong cùng một dòng

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

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

Một phương pháp hiệu quả khác là một công việc CSS đang sử dụng font-size:0cho phần tử cha và cung cấp cho font-sizephần tử con nhiều như bạn muốn.

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

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

Các phương pháp trên có thể không hoạt động ở đâu đó tùy thuộc vào toàn bộ ứng dụng, nhưng phương pháp cuối cùng là một giải pháp hoàn hảo cho tình huống này và có thể được sử dụng ở bất cứ đâu.

Tôi đã gặp vấn đề này ngay bây giờ và từ khi font-size:0;tôi phát hiện ra rằng trong Internet Explorer 7, vấn đề vẫn còn do Internet Explorer nghĩ rằng "Cỡ chữ 0?!?! WTF bạn có phải là người điên không?" - Vì vậy, trong trường hợp của tôi, tôi đã thiết lập lại CSS của Eric Meyer và với font-size:0.01em;tôi có sự khác biệt 1 pixel từ Internet Explorer 7 và Firefox 9, vì vậy, tôi nghĩ rằng đây có thể là một giải pháp.

Gần đây tôi đã giải quyết vấn đề này và thay vì đặt cha mẹ font-size:0sau đó đặt con về giá trị hợp lý, tôi đã nhận được kết quả nhất quán bằng cách đặt thùng chứa cha mẹ letter-spacing:-.25emsau đó con quay lại letter-spacing:normal.

Trong một chủ đề thay thế, tôi thấy một nhà bình luận đề cập font-size:0không phải lúc nào cũng lý tưởng bởi vì mọi người có thể kiểm soát kích thước phông chữ tối thiểu trong trình duyệt của họ, phủ nhận hoàn toàn khả năng đặt kích thước phông chữ thành 0.

Sử dụng ems dường như hoạt động bất kể kích thước phông chữ được chỉ định là 100%, 15pt hay 36px.

http://cdpn.io/dKIjo

Tôi nghĩ rằng có một phương pháp rất đơn giản / cũ cho phương pháp này được hỗ trợ bởi tất cả các trình duyệt ngay cả IE 6/7. Chúng ta có thể chỉ cần đặt letter-spacingthành một giá trị âm lớn trong phần gốc và sau đó đặt lại normalthành phần tử con:

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>

Câu trả lời đơn giản nhất cho câu hỏi này là thêm.

css

float: left;

liên kết codepen: http://jsfiddle.net/dGHFV35360/

Với dấu ngoặc PHP:

ul li {
  display: inline-block;
}

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

Tôi sẽ mở rộng câu trả lời của user5609829 một chút vì tôi tin rằng các giải pháp khác ở đây quá phức tạp / quá nhiều công việc. Áp dụng một margin-right: -4pxphần tử khối nội tuyến sẽ loại bỏ khoảng cách và được tất cả các trình duyệt hỗ trợ. Xem các fiddle cập nhật ở đây . Đối với những người quan tâm đến việc sử dụng lề âm, hãy thử đọc cái này .

Đặc tả cấp 4 của Mô-đun văn bản CSS xác định một thuộctext-space-collapse tính, cho phép kiểm soát cách xử lý khoảng trắng bên trong và xung quanh một phần tử.

Vì vậy, liên quan đến ví dụ của bạn, bạn sẽ phải viết điều này:

p {
  text-space-collapse: discard;
}

Thật không may, chưa có trình duyệt nào đang triển khai thuộc tính này (kể từ tháng 9 năm 2016) như được đề cập trong các bình luận cho câu trả lời của HBP .

Tôi tìm thấy một giải pháp CSS thuần túy hoạt động tốt cho tôi trong tất cả các trình duyệt:

span {
    display: table-cell;
}

Thêm vào white-space: nowrapphần tử container:

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>

Đây là Plunker .

Có rất nhiều giải pháp như font-size:0, word-spacing, margin-left, letter-spacingvà vân vân.

Thông thường tôi thích sử dụng letter-spacingvì

1. Có vẻ ổn khi chúng ta gán một giá trị lớn hơn chiều rộng của không gian thừa (ví dụ -1em).
2. Tuy nhiên, nó sẽ không ổn với word-spacingvà margin-leftkhi chúng ta đặt giá trị lớn hơn như thế nào -1em.
3. Sử dụng font-sizekhông thuận tiện khi chúng ta cố gắng sử dụng emnhư font-sizeđơn vị.

Vì vậy, letter-spacingdường như là sự lựa chọn tốt nhất.

Tuy nhiên, tôi phải cảnh báo bạn

khi bạn sử dụng letter-spacingbạn đã sử dụng tốt hơn -0.3emhoặc -0.31emkhông sử dụng người khác.

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

Nếu bạn đang sử dụng Chrome (phiên bản thử nghiệm 66.0.3359.139) hoặc Opera (phiên bản thử nghiệm 53.0.2907.99), những gì bạn thấy có thể là:

Nếu bạn đang sử dụng Firefox (60.0.2), IE10 hoặc Edge, những gì bạn thấy có thể là:

Nó thật thú vị. Vì vậy, tôi đã kiểm tra khoảng cách chữ cái và tìm thấy nó:

chiều dài

Chỉ định không gian liên ký tự bổ sung ngoài không gian mặc định giữa các ký tự. Các giá trị có thể âm, nhưng có thể có các giới hạn cụ thể thực hiện. Tác nhân người dùng không được tăng hoặc giảm thêm không gian giữa các ký tự để chứng minh văn bản.

Có vẻ như đây là lý do.

Thêm letter-spacing:-4px;vào pcss cha và thêm letter-spacing:0px;vào spancss của bạn .

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>

Tôi nghĩ rằng tôi đã thêm một cái gì đó mới vào câu hỏi này vì mặc dù nhiều câu trả lời hiện được cung cấp không đầy đủ và phù hợp, có một số thuộc tính CSS mới có thể đạt được đầu ra rất rõ ràng, với sự hỗ trợ đầy đủ trên tất cả các trình duyệt và ít không 'hack'. Điều này không di chuyển khỏi inline-blocknhưng nó mang lại cho bạn kết quả giống như câu hỏi được yêu cầu.

Các thuộc tính CSS này là grid

CSS Grid được hỗ trợ cao ( CanIUse ) ngoài IE chỉ cần -ms-tiền tố để cho phép nó hoạt động.

CSS Lưới cũng là rất linh hoạt và có tất cả các phần tốt từ table, flexvà inline-blockcác yếu tố và đưa chúng vào một nơi.

Khi tạo một gridbạn có thể chỉ định các khoảng trống giữa các hàng và cột. Khoảng cách mặc định đã được đặt thành 0pxnhưng bạn có thể thay đổi giá trị này thành bất cứ điều gì bạn thích.

Để cắt ngắn một chút, đây là một ví dụ hoạt động có liên quan:

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>

Một cách khác mà tôi tìm thấy là áp dụng lề trái làm giá trị âm trừ phần tử đầu tiên của hàng.

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

Mỗi câu hỏi, cố gắng loại bỏ khoảng cách giữa inline-blockcác s có vẻ như <table>đối với tôi ...

Hãy thử một cái gì đó như thế này:

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>