Где находится промежуток между этими кнопками Bootstrap?

Question

У этих buttons есть промежуток между ними. Я не могу воссоздать это. Используя инструмент инспектора, я не могу понять, откуда этот разрыв. Есть идеи?

Answer 1

Это происходит от контейнера font-size. Это происходит потому, что сами кнопки устанавливаются как inline-block, что означает, что они встроены в текст и обрабатываются очень точно. Поскольку между каждым элементом разметки есть новая строка, появляется пробел (так как спецификация HTML указывает браузерам, как обрабатывать новые строки).

Мы можем продемонстрировать это себя с тем же свойством отображения:

button { 
 
    display: inline-block; 
 
}

<button>Foo</button> 
 
<button>Bar</button>

Если мы увеличиваем font-size в body (контейнер для этих кнопок в этом примере), размер площадь будет увеличиваться:

body { 
 
    font-size: 72px; 
 
} 
 

 
button { 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    vertical-align: top; 
 
}

<button>Foo</button> 
 
<button>Bar</button>

Мы можем устранить разрыв полностью, давая контейнер font-size 0:

body { 
 
    font-size: 0; 
 
} 
 

 
button { 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    vertical-align: top; 
 
}

<button>Foo</button> 
 
<button>Bar</button>

Смотрите также: How to remove the space between inline-block elements?