Як видалити простір між елементами вбудованого / вбудованого блоку?

Враховуючи цей 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/

Я розумію, чому це відбувається, і я також знаю, що я міг позбутися цього простору, видаливши пробіл між елементами 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>

Тепер, коли я пішов і занудив вас до смерті "тисячею різних способів видалити пробіл, тридцятьма краплями", сподіваюся, ви все забули 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 .

СТАРИЙ ВІДПОВІДЬ:

Гаразд, хоча я підтримав 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>

це некрасиво, але працює.

Але, стривайте ... що , якщо я генерувати мої діви всередині 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, щоб підключити кінець одного діва до початку наступного!

<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

Додати 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>

Це та сама відповідь, яку я дав на відповідне: Дисплей: Вбудований блок - Що це за пробіл?

Насправді є дуже простий спосіб видалити пробіл з вбудованого блоку, який є простим і семантичним. Він називається спеціальним шрифтом з пробілами нульової ширини, що дозволяє згортати пробіли (додані браузером для вбудованих елементів, коли вони знаходяться в окремих рядках) на рівні шрифту, використовуючи дуже крихітний шрифт. Після того, як ви оголосите шрифт, ви просто поміняєте 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. Мене брали всі 5 хвилин. @font-faceДекларація css включена: шрифт пробілу з нульовою шириною . Він знаходиться в Диску Google, тому вам потрібно буде натиснути Файл> Завантажити, щоб зберегти його на комп’ютері. Можливо, вам також знадобиться змінити контури шрифту, якщо ви скопіюєте декларацію в основний файл css.

Ще два варіанти, засновані на текстовому модулі CSS рівня 3 (замість цього white-space-collapsing:discardбуло скинуто з проекту специфікації):

• word-spacing: -100%;

Теоретично він повинен робити саме те, що потрібно - скоротити пробіли між 'словами' на 100% від ширини простору символів, тобто до нуля. Але, на жаль, ніде не працює, і ця функція позначена як «ризикована» (її можна також виключити зі специфікації).

• 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 - властивість розділення слів

розмір шрифту: 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/

ПРИМІТКА. Я змінив, щоб він міг успадковувати проміжки літер, коли в обгортці є дочірня обгортка.

Хоча технічно це не відповідь на питання: "Як я можу видалити простір між елементами вбудованого блоку?"

Ви можете спробувати рішення 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 вважає "Розмір шрифту 0?!?! WTF ти божевільна людина?" - Отже, у моєму випадку я скинув CSS Еріка Мейєра, і у font-size:0.01em;мене різниця в 1 піксель від Internet Explorer 7 до Firefox 9, тож, я думаю, це може бути рішенням.

Я нещодавно вирішував це питання, і замість того, щоб встановити батьків, font-size:0а потім повернути дитину до розумного значення, я отримував послідовні результати, встановлюючи батьківський контейнер, letter-spacing:-.25emа потім дитину назад letter-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;

код посилання: 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, оскільки я вважаю, що інші рішення тут занадто складні / занадто багато роботи. Застосування margin-right: -4pxелементів до вбудованих елементів блоку видалить інтервал і підтримується всіма браузерами. Дивіться оновлену скрипку тут . Для тих , хто пов'язаний з використанням негативних полів, спробуйте дати це читання.

Специфікація текстового модуля CSS рівня 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>

Ось Плункер .

Є багато рішень , як 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:-4px;до батьківського pcss та додайте 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>